vue精要(4)-项目构建
# 1、脚手架vue-cli
# 1.1 安装启动
# 1.安装 Vue CLI
npm i -g @vue/cli # or
yarn global add @vue/cli
# 2.创建项目 vue-project 是你的项目名称
vue create vue-project
# 3.启动项目
cd vue-project
yarn serve # or
npm run serve
# 4.查看帮助
vue create --help
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 1.2 目录结构
├── node_modules # 项目依赖包目录
├── public # 静态资源(打包不会处理) <必须>
├── src # 源码目录
├── api/mock # 所有api接口 <根据需要>
├── assets # 静态资源,images, icons, styles等 <必须>
├── components # 公用组件 <必须>
├── config # 配置信息 <必须>
├── directives # 自定义指令 <根据需要>
├── filters # 过滤器,全局工具 <根据需要>
├── utils/libs # 工具型插件,全局使用 <根据需要>
├── router # 路由,统一管理 <必须>
├── store # vuex, 统一管理 <必须>
├── views # 视图目录 <必须>
├──├── role # role模块 <根据需求>
├──├── ├── RoleList.vue # role列表页面 <根据需求>
├──├── employee # employee模块 <根据需求>
├──├── Index.vue # 首页 <根据需要>
├── App.vue # 入口vue文件 <必须>
├── main.js # 入口js文件 <必须>
├── 根据需求自建目录 # <根据需求>
├── .env.development # 开发环境配置 <必须>
├── .env.production # 生产环境配置 <必须>
├── .env.test # 测试环境配置 <必须>
├── .gitignore # git提交忽略配置 <必须>
├── babel.config.js # babel配置 <必须>
├── package.json # 项目配置文件 <必须>
├── README.md # README <非必须>
├── vue.config.js # vue配置文件 <必须>
├── yarn.lock # yarn依赖信息文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29