Vue-Cli脚手架

1.初始化项目创建

1、基础环境：安装node.js
2、全局安装：vue-cli：npm install -g vue-cli
3、创建项目：vue create 项目名称、选择vue2版本
4、运行项目：npm run serve

2.Vue-cli目录结构

1.整体结构

ZsWsParJitUKWzj5

2.src目录

src                               源码目录
|-- api                              所有api接口
|-- assets                           静态资源，images, icons, styles等
|-- components                       公用组件
|-- config                           配置信息
|-- constants                        常量信息，项目所有Enum, 全局常量等
|-- directives                       自定义指令
|-- filters                          过滤器，全局工具
|-- datas                            模拟数据，临时存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- plugins                          插件，全局使用
|-- router                           路由，统一管理
|-- store                            vuex, 统一管理
|-- themes                           自定义样式主题
|-- views                            视图目录
|   |-- role                             role模块名
|   |-- |-- role-list.vue                    role列表页面
|   |-- |-- role-add.vue                     role新建页面
|   |-- |-- role-update.vue                  role更新页面
|   |-- |-- index.less                      role模块样式
|   |-- |-- components                      role模块通用组件文件夹
|   |-- employee                         employee模块

3.Vue-cli项目配置

1.vue.config.js

Vue-cli中的可选配置文件，和package.json同级时，则会进行自动加载
配置文件地址：https://cli.vuejs.org/zh/config/#publicpath

2.vue-router

Vue-router是Vue官方提供的一套路由插件，用于构建单页面应用，主要用来管理页面路由
基本使用：
1、创建router/router.js：进行路由定义
2、在main.js文件中注入router路由
3、App.vue中添加路由显示标签

<router-view/>

4、router.js中两种路由注入方式

import login from "../views/login.vue";        第一种是在文件开头引入
{
    component: () => import('../views/login.vue');        第二种是在路由注册中直接引入
}

4.插件安装

Element-UI：终端输入vue add element; 选择Full全局安装，其余均为y。

5.VsCode连接git

git：创建并初始化仓库文件
vscode：开启终端
git init
git add *
git commit -m “提交日志”
git remote add origin git地址
推送，发布分支