@@ -4,7 +4,7 @@ sidebar: auto
4
4
5
5
# 从 v3 迁移
6
6
7
- 首先, 全局安装最新版的 Vue CLI:
7
+ 首先, 全局安装最新版的 Vue CLI:
8
8
9
9
``` sh
10
10
npm install -g @vue/cli
@@ -14,81 +14,97 @@ yarn global add @vue/cli
14
14
15
15
## 一次性更新所有插件
16
16
17
- 在已有的项目里运行:
17
+ 在已有的项目里运行:
18
18
19
19
``` sh
20
20
vue upgrade
21
21
```
22
22
23
- 之后参看各章节为具体的breaking changes.
23
+ 之后参看各章节为具体的breaking changes。
24
24
25
25
------
26
26
27
27
## 一步步手动移植
28
28
29
- 如果你想要手动渐进式移植, 这里有一些建议:
29
+ 如果你想要手动渐进式移植, 这里有一些建议:
30
30
31
31
### 全局的 ` @vue/cli `
32
32
33
33
#### [ 全新设计的] ( https://github.com/vuejs/vue-cli/pull/4090 ) ` vue upgrade `
34
34
35
- - 之前运行: ` vue upgrade [patch | minor | major] ` , 这个命令只会安装最新版的插件.
36
- - 现在运行: ` vue upgrade [plugin-name] ` . 除了升级插件外, 该命令还可以运行移植工具来帮助你自动化移植过程. 关于这个命令的更多选项, 请执行 ` vue upgrade --help ` .
35
+ - 之前运行: ` vue upgrade [patch | minor | major] ` , 这个命令只会安装最新版的插件。
36
+ - 现在运行: ` vue upgrade [plugin-name] ` 。 除了升级插件外, 该命令还可以运行移植工具来帮助你自动化移植过程。 关于这个命令的更多选项, 请执行 ` vue upgrade --help ` 。
37
37
38
38
#### ` vue --version ` 输出格式变更
39
39
40
- 当执行 ` vue --version ` 时:
40
+ 当执行 ` vue --version ` 时:
41
41
42
- - 3.x: 输出 ` 3.12.0 `
43
- - 4.x: 输出 ` @vue/cli 4.0.0 `
42
+ - 3.x: 输出 ` 3.12.0 `
43
+ - 4.x: 输出 ` @vue/cli 4.0.0 `
44
44
45
45
#### 额外的验证步骤来防止覆盖
46
46
47
- 当执行 ` vue invoke ` / ` vue add ` / ` vue upgrade ` 时, 当你当前的项目里有未提交代码时, 会有一个[ 额外的验证步骤] ( https://github.com/vuejs/vue-cli/pull/4275 )
47
+ 当执行 ` vue invoke ` / ` vue add ` / ` vue upgrade ` 时, 当你当前的项目里有未提交代码时, 会有一个[ 额外的验证步骤] ( https://github.com/vuejs/vue-cli/pull/4275 )
48
48
49
49
![ image] ( https://user-images.githubusercontent.com/3277634/65588457-23db5a80-dfba-11e9-9899-9dd72efc111e.png )
50
50
51
51
#### Vue Router 和 Vuex 现在有了对应的 CLI 插件
52
52
53
- 当运行 ` vue add vuex ` 或 ` vue add router ` 时:
53
+ 当运行 ` vue add vuex ` 或 ` vue add router ` 时:
54
54
55
- - 在 v3 版中: 只有 ` vuex ` 或 ` vue-router ` 会被添加到项目中;
56
- - 在 v4 版中: 同时会把 ` @vue/cli-plugin-vuex ` 或 ` @vue/cli-plugin-router ` 安装到项目中.
55
+ - 在 v3 版中: 只有 ` vuex ` 或 ` vue-router ` 会被添加到项目中;
56
+ - 在 v4 版中: 同时会把 ` @vue/cli-plugin-vuex ` 或 ` @vue/cli-plugin-router ` 安装到项目中。
57
57
58
- 当前不会对终端用户产生影响, 但是这个设计可以允许我们以后为 Vuex 或 Vue Router用户添加更多新特性.
58
+ 当前不会对终端用户产生影响, 但是这个设计可以允许我们以后为 Vuex 或 Vue Router用户添加更多新特性。
59
59
60
- 对 Preset 和 插件作者来说, 在这两个插件中有许多值得注意的改变:
60
+ 对 Preset 和 插件作者来说, 在这两个插件中有许多值得注意的改变:
61
61
62
- - 默认的目录结构变更:
63
- - ` src/store.js ` 搬到了 ` src/store/index.js ` ;
64
- - ` src/router.js ` 重命名为 ` src/router/index.js ` ;
65
- - 为了兼容更早的版本, ` preset.json ` 里的 ` router ` 和 ` routerHistoryMode ` 选项仍然支持. 但是现在为了保持更好的一致性推荐使用 ` plugins: { '@vue/cli-plugin-router': { historyMode: true } } ` .
66
- - 现在已经不再支持 ` api.hasPlugin('vue-router') ` 的写法. 现在的写法是 ` api.hasPlugin('router') ` .
62
+ - 默认的目录结构变更:
63
+ - ` src/store.js ` 搬到了 ` src/store/index.js ` ;
64
+ - ` src/router.js ` 重命名为 ` src/router/index.js ` ;
65
+ - 为了兼容更早的版本, ` preset.json ` 里的 ` router ` 和 ` routerHistoryMode ` 选项仍然支持。但是现在为了保持更好的一致性推荐使用 ` plugins: { '@vue/cli-plugin-router': { historyMode: true } } ` 。
66
+
67
+ - 现在已经不再支持 ` api.hasPlugin('vue-router') ` 的写法。现在的写法是 ` api.hasPlugin('router') ` 。
67
68
68
69
### ` @vue/cli-service `
69
70
70
71
#### 在模板中处理空格
71
72
72
- 为了获得一个更小的打包, 我们在 Vue CLI v3 中默认禁用了 ` vue-template-compiler ` 的 ` preserveWhitespace ` 选项.
73
+ 为了获得一个更小的打包, 我们在 Vue CLI v3 中默认禁用了 ` vue-template-compiler ` 的 ` preserveWhitespace ` 选项。
73
74
74
- 然而这项改进有一些需要注意的地方.
75
+ 然而这项改进有一些需要注意的地方。
75
76
76
- 好消息是, 自从 Vue 2.6 发布以来, 我们可以用 [ 新的 ` whitespace ` 选项] ( https://github.com/vuejs/vue/issues/9208#issuecomment-450012518 ) 来更好的处理空格.
77
+ 好消息是, 自从 Vue 2.6 发布以来, 我们可以用 [ 新的 ` whitespace ` 选项] ( https://github.com/vuejs/vue/issues/9208#issuecomment-450012518 ) 来更好的处理空格。
77
78
78
- 使用以下模板作为参考:
79
+ 使用以下模板作为参考:
79
80
80
81
``` html
81
82
<p >Welcome to <b >Vue.js</b > <i >world</i >. Have fun!</p >
82
83
```
83
- 设置 ` preserveWhitespace: false ` , 所有tag中的空格已经被移除, 编译后为:
84
+ 设置 ` preserveWhitespace: false ` , 所有tag中的空格已经被移除, 编译后为:
84
85
85
86
``` html
86
87
<p >Welcome to <b >Vue.js</b ><i >world</i >. Have fun!</p >
87
88
```
88
- 设置 ` whitespace: 'condense' ` , 编译后为:
89
+ 设置 ` whitespace: 'condense' ` , 编译后为:
89
90
90
91
``` html
91
92
<p >Welcome to <b >Vue.js</b > <i >world</i >. Have fun!</p >
92
93
```
93
94
94
- 注意 tag中 ** inline** 样式的的空位会保留.
95
+ 注意 tag中 ** inline** 样式的的空位会保留。
96
+
97
+ #### ` vue-cli-service build --mode development `
98
+
99
+ 在过去,在 ` development ` 模式下执行 ` build ` 命令,` dist ` 文件夹的结构会与 ` production ` 的不同。现在随着下面两项改变,文件夹的结构在所有模式下都会相同 (文件名仍然会不同 - 在 ` development ` 模式下文件名没有哈希):
100
+
101
+ - [ #4323 ] ( https://github.com/vuejs/vue-cli/pull/4323 ) ensure consistent directory structure for all modes
102
+ - [ #4302 ] ( https://github.com/vuejs/vue-cli/pull/4302 ) move dev configs into serve command
103
+
104
+ #### 对 SASS/SCSS 用户
105
+
106
+ 之前在 Vue CLI v3中, 我们使用了 ` sass-loader@7 ` 。
107
+
108
+ 最近 ` sass-loader@8 ` 已经发布而且在配置文件格式上有了很多变化。这里是更新日志:< https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0 >
109
+
110
+ ` @vue/cli-service ` 在 v4 版中还会继续支持 ` sass-loader@7 ` ,但是我们强烈建议你看一下 v8 版本, 并且更新到最新版。
0 commit comments