使用vue-cli搭建vue项目

vue-cli

vue的脚手架
安装脚手架之前需要安装node.js
安装脚手架

安装vue-cli

shift + 右击 调出命令窗口
npm install -g @vue/cli
 或
yarn global add @vue/cli
进行安装

下载完后可以
vue --version 检查脚手架版本(检查是否安装成功)

创建vue项目

vue ui  打开管理页面

点击ui界面的创建项目进行创建

npm 官网 : https://www.npmjs.com/
yarn 官网: https://yarnpkg.com/zh-Hant/

6_YY`2}TL0TSP3TCVR89QDW.png

点击创建即可创建一个vue项目
完成后，会出现一个刚才创建时命名的文件夹

启动服务

npm run serve
在ui界面的任务->serve->运行->启动app

配置依赖插件

配置vue路由
npm i --save-dev vue-router
点击ui界面的依赖->搜索需要的->安装

文件夹介绍

package.json

1.package.json 里面包含了启动服务插件和依赖等的信息

node_modules里存放下载的依赖和插件等

当node_modules不存在时npm i 就能根据backage.json把modules下载回来

main.js

所有导入、引用操作的原始站
vue、vue-router、ui库、封装方法等所有需要导入的都在这里导入
在引用ui库时导入后还需在下面添加下面的代码
Vue.sue(UI名)

导入格式   import Vue from 'vue'
导入公共样式和js的格式 import '路径'
只取需要的  import {get,post} from '路径'

方法:在npm官网查找需要引入的插件
UI库官网  
根据官网的提示操作安装使用，这样能更好的学习新知识

elme-ui: http://element-cn.eleme.io/#/zh-CN/component/installation
mint-ui :https://mint-ui.github.io/docs/#/zh-cn2/navbar

public文件夹下的index.html

公共html   APS(单页面)开发各个组件共用的一个html
移动pc端meta  
需要更改的是meta，在百度上copy(复制) mata name=viewport的路径然后吧html的meta替换
用途:用途还有很多，比如可以直接link引用网址来使用其他功能

src文件下新建两个文件夹

views 视图文件夹
我们编辑的页面组件(vue结尾)代码存放处
views里组件存放在对应文件夹里

router 路由文件夹
子文件index.js用于配置路由

views 创建组件

新建文件夹 子文件 index.vue
vue组件里 sc可以调出组件结构
template
里面只能有一个标签(相当于body)html的代码存放处

script
import 导入 组件、方法、插件等
export default 导出 生命周期函数
和路由对接   路由里会导入这里导出的东西达成二者之间的联系
data 数据存储处

style  存放样式 
scoped 放在<style scope> 必须加的  防止样式污染
lang="less" 选择模式，这里选择的是less，默认css，less为插件需要安装npm i less less-loader --save-dev
导入main.js里有的公共样式  @import '路径'

生命周期函数
created 开头(最先执行的)
mouted  挂载
methods 函数、事件函数存放处
updated 更新
destroy 摧毁

配置路由

index.js里操作
1.安装vue-router
    npm i vue-router -g
2.导入vue和vue-router
    vue是一切的基础,vue-router是建立在vue上面的
    vue-router其实就是vue的一个插件
    import Vue from 'vue';
import Router from 'vue-router';
3.使用vue-router
    Vue.use(Router);
4.配置路由
    1.const 对象名 = {  }
        定义一个对象来储存路径
    2.对象里配置路径
        {
        path:'/film',    //    对应文件夹前加/
        component: () => import('@/views/对应文件夹'),
        children:[ //子路由
            {
                path: '名称',
                component: () => import('文件路径'),
            },},    
导入对应每个组件里的导出，只是路径不同
    3.把对象赋给Router的新对象router
        const router = new Router({
    routes:routerList    // routes属性 来装包含路径的对象
})
    4.导出router
        export default router;
    5.在mian.js里导入
        import router from './router/index';
    6.在mian.js里面的Vue里添加router
        new Vue({
  router,
  el:'#app',
  render: h => h(App),
}).$mount('#app')

后续还有vue实际的项目总结

最后编辑于：2019.03.25 21:23:30