vue-cli版本的区别
# vue-cli各版本的区别
# 主要区别：
- 安装和项目的构建
- 项目目录的变化
- 项目配置的变化
// 变化一： 安装
# cli 2.x
npm install -g vue-cli
# cli 3.x
# 3.x 安装时，如果之前安装了2.x需要卸载2.x再安装
npm install -g @vue/cli
// 拉低2.x模版
npm install @vue/cli-init -g
// 变化二：项目构建
// cli2.x:
vue init <template-name> <project-name>
npm i
npm run dev
// cli3.x:
//安装新增TypeScript配置选项
//新增图形化安装方法
//保留了2.x之前的安装方法
# 法一：
vue create <project-name>
npm i
npm run serve
# 法二： 使用vue ui创建新项目(3.x新增)
终端： vue ui
# 法三：使用旧版（2.X）创建
npm install -g @vue/cli-init
# 'vue init'的运行效果与‘vue-cli@2.x’相同
vue init webpack projectname
// 变化三：目录结构发生变化
// 见下面
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
30
31
32
33
34
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
30
31
32
33
34
# vue项目目录和build目录
# vue-cli2.x 项目目录
| 目录/文件 | 说明 | 详解 |
|---|---|---|
| build | 项目构建webpack相关代码 | 详解 |
| config | 配置目录，包括端口号 | 详解 |
| node_modules | npm加载的相关依赖模块 | 详解 |
| src | 里面包含了几个目录及文件： ♞ assets：放置一些图片，如 logo ♞ components：放置一些组件 ♞ store: vuex的状态管理文件 ♞ views：页面(视图)组件 ♞ router.js：路由脚本文件 ♞ App.vue：项目入口文件 ♞ main.js:：项目的核心文件 | 详解 |
| static | 静态资源目录，如图片、字体等 | 详解 |
| test | 初始测试目录，可删除 | 详解 |
| .xxxx 文件 | 这些是一些配置文件，包括语法配置，git 配置等 | |
| index.html | 首页入口文件 | |
| package.json | 项目配置文件 | 详解 |
| README.md | 项目的说明文档，markdown 格式 |
build 目录
| 目录/文件 | 说明 |
|---|---|
| build.js | 生产环境构建配置 |
| check-versions.js | 版本检查，npm 等 |
| utils | 构想相关工具 |
| vue-loader.conf.js | CSS 加载器配置 |
| webpack.base.conf.js | webpack 基础配置 |
| wepback.dev.conf.js | webpack 开发环境配置 |
| wepback.prod.conf.js | webpack 生产环境配置 |
config 目录
| 目录/文件 | 说明 |
|---|---|
| dev.env.js： | 导出开发环境名称 |
| prod.env.js： | 导出生产环境名称 |
| index.js： | 导出不同环境的具体配置 |
# vue-cli3.x
项目目录结构 ├── public // 静态资源 ├── src // 源代码 │ ├── api // 所有请求 │ ├── assets // 主题 字体等静态资源 │ ├── components // 全局公用组件 │ ├── models // 实体类 │ ├── router // 路由及路由配置相关 │ ├── store // 全局 store管理 │ ├── utils // 全局公用方法 │ ├── pages // view │ ├── App.vue // 入口页面 │ ├── main.js // 入口 加载组件 初始化等 ├── tests // jest测试 ├── .eslintrc.js // eslint配置 └── package.json
编辑 (opens new window)