VUE学习：二.创建项目
前言
了解 vue 项目创建过程以及其目录结构，在开发中需要注意的地方，能够更好地规范前端开发
#1.vue-cli 2.x
1.安装
vue-cli
npm install -g vue-cli
1
2.项目创建
vue init <template-name> <project-name>npm inpm run dev
1
2
3
2
3
使用旧版（2.X）创建
1.安装
@vue/cli-init
npm install -g @vue/cli-init
1
2.项目创建
vue init webpack projectnamenpm run dev
1
2
2
#2.vue-cli 3.x
1.安装
@vue/cli
node -v # Vue-cli3.0 需要在 Node.js 8.9 或更高版本npm -v # 在安装 node 的时候，npm 包管理器会自动安装，通过查看 npm 版本来判断是否安装成功npm i -g @vue/cli # 或者使用yarn安装 yarn install -g @vue/cli 全局安装 Vue-cli 3.0
1
2
3
2
3
2.创建项目
vue create vue3-demo vue --version # 查询版本是否为3.xyarn serve # 启动项目或者 npm run serve
1
2
3
2
3
#2.1 项目结构
├── node_modules # 项目依赖包目录，存放下载依赖的文件夹├── public # 存放不会变动静态的文件，它与src/assets的区别在于，public目录中的文件不被webpack打包处理，会原样拷贝到dist目录下│ ├── favicon.ico # 在浏览器上显示的图标│ └── index.html # 主页面文件├── src # 源码文件夹│ ├── assets # 存放组件中的静态资源│ ├── components # 存放一些公共组件│ ├── views # 存放所有的路由组件│ ├── App.vue # 应用根主组件│ ├── main.js # 应用入口 js│ ├── router # 路由配置文件│ └── store # vuex状态管理文件├── .eslintrc.js # eslint相关配置├── .gitignore # git 版本管制忽略的配置├── .postcssrc.js # postcss一种对css编译的工具，类似babel对js的处理├── babel.config.js # babel 的配置,即ES6语法编译配置├── package.json # 项目基本信息,包依赖配置信息等└── yarn.lock # 用于记录当前状态下实际安装的各个包的具体来源和版本号等, 保证其他人在 npm install 项目时大家的依赖能保证一致.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
开发规范
命名规范（文件命名，变量，函数，class， id） 驼峰， - _ 约定法
目录规范（目录如何建立） 划分目录结构 约定法
#3.前端技术选型
在 vue 2.x 项目中
在 vue3.x 项目中
#4.package.json
注意
区分dependencies依赖和devDependencies依赖
{
"name": "vue3-demo", // 项目/模块名称，长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母
"version": "0.1.0", // 项目版本
"author": "zhoubichuan", // 项目开发者，https://npmjs.org账户名，遵循“账户名<邮件>”的规则，例如：zhoubichuan zhoubichuan@icloud.com
"description": "demo", // 项目描述，是一个字符串。它可以帮助人们在使用npm search时找到这个包
"keywords": "demo", // 项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包
"private": true, // 是否私有，设置为 true 时，npm 拒绝发布
"scripts": {
// 执行 npm 脚本命令简写，比如 “start”: “react-scripts start”, 执行 npm start 就是运行 “react-scripts start”
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
// 生产环境下，项目运行所需依赖
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
// 开发环境下，项目所需依赖
"@types/chai": "^4.2.11",
"@types/mocha": "^5.2.4",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-e2e-cypress": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-pwa": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-mocha": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^2.0.0-0",
"chai": "^4.1.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~4.1.5"
}}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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
其他一些配置说明
license：软件授权条款，让用户知道他们的使用权利和限制。
bugs：bug 提交地址。
contributors：项目贡献者 。
repository：项目仓库地址。
homepage：项目包的官网 URL。
bin：内部命令对应的可执行文件的路径。
main：项目默认执行文件，比如 require(‘webpack’)；就会默认加载 lib 目录下的 webpack.js 文件，如果没有设置，则默认加载项目跟目录下的 index.js 文件。
module：是以 ES Module(也就是 ES6)模块化方式进行加载，因为早期没有 ES6 模块化方案时，都是遵循 CommonJS 规范，而 CommonJS 规范的包是以 main 的方式表示入口文件的，为了区分就新增了 module 方式，但是 ES6 模块化方案效率更高，所以会优先查看是否有 module 字段，没有才使用 main 字段。
eslintConfig：EsLint 检查文件配置，自动读取验证。
engines：项目运行的平台。
browserslist：供浏览器使用的版本列表。
style：供浏览器使用时，样式文件所在的位置；样式文件打包工具 parcelify，通过它知道样式文件的打包位置。
files：被项目包含的文件名数组
#2.常用命令
npm init # 生成package.json文件（需要手动配置）npm init -y # 生成package.json文件（使用默认配置）npm i # 一键安装package.json下的依赖包npm i xxx # 在项目中安装包名为xxx的依赖包（配置在dependences下）npm i xxx --save # 在项目中安装包名为xxx的依赖包（配置在dependencies下）npm i xxx --save-dev # 在项目中安装包名为xxx的依赖包（配置在devDependencies下）npm i -g xxx # 全局安装包名为 xxx的依赖包npm run xxx # 运行package.json中scripts下的命令npm update xxx # 更新某个包npm home xxx # 打开xxx包的主页npm repo xxx # 打开xxx包的代码仓库npm publish # 将当前模块发布到npmjs.com,需要先登录npm view xxx # 查看当前依赖的版本npm view xxx version # 查看当前依赖仓库的版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
#3.第三方插件配置
browserslist 第三方插件配置，该配置的主要作用是用于在不同的前端工具之间共享目标浏览器和 Node.js 的版本
"browserslist":[ "> 1%", # 表示包含使用率 > 1%的浏览器 "last 2 versions", # 表示包含浏览器最新的两个版本 "not ie <= 9" # 表示不包含 ie8 及以下版本]
1
2
3
4
5
2
3
4
5
当然，你也可以单独写在.browserslistrc的文件中
> 1% last 2 versions not ie <= 8
1
2
3
2
3
#3.1 autoprefixer
autoprefixer这样的插件需要把你写的 css 样式适配不同的浏览器，那么这里要针对那些浏览器呢，即使上面配置中所包含的。
而如果写在 autoprefixer 的配置中，那么会存在一个问题，万一其他第三方插件也需要浏览器的包含范围用于实现其特定的功能，那么就又得在其配置中设置一遍，这样就无法得以共用。所以在 package.json 中配置 browserslist 的属性使得所有工具都会自动找到目标浏览器。
至于它是如何平衡浏览器的使用率和版本的，数据都是来源于 Can I Use。你也可以搜索配置项所包含的浏览器列表，比如搜索last 2 versions 会得到你想要的结果，或者在项目终端运行如下命令查看：
npx browserslist
1
#5.babel.config.js
#6..postcssrc.js
#7..eslintrc.js
module.exports = {
env: {
browser: true,
commonjs: true,
es6: true,
},
extends: "eslint:recommended", // 在js里面有些时候用到一些全局变量，防止eslint无脑报错
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
process: false,
},
parser: "vue-eslint-parser",
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
},
rules: {
"no-console": "off",
"linebreak-style": [0, "error", "windows"],
indent: ["off", 2],
"accessor-pairs": 2,
"arrow-spacing": [
2,
{
before: true,
after: true,
},
],
"array-bracket-spacing": [2, "never"],
"block-spacing": [2, "always"],
"brace-style": [
2,
"1tbs",
{
allowSingleLine: true,
},
],
camelcase: [
2,
{
properties: "never",
},
],
"comma-dangle": [2, "never"],
"comma-spacing": [
2,
{
before: false,
after: true,
},
],
"comma-style": [2, "last"],
"constructor-super": 2,
curly: [2, "multi-line"],
"dot-location": [2, "property"],
"eol-last": 2,
eqeqeq: [2, "allow-null"],
"generator-star-spacing": [
2,
{
before: true,
after: true,
},
],
"handle-callback-err": [2, "^(err|error)$"],
"jsx-quotes": [2, "prefer-single"],
"key-spacing": [
2,
{
beforeColon: false,
afterColon: true,
},
],
"keyword-spacing": [
2,
{
before: true,
after: true,
},
],
"new-cap": [
2,
{
newIsCap: true,
capIsNew: false,
},
],
"new-parens": 2,
"no-array-constructor": 2,
"no-caller": 2,
"no-class-assign": 0,
"no-cond-assign": 2,
"no-const-assign": 2,
"no-control-regex": 2,
"no-debugger": 2,
"no-delete-var": 2,
"no-dupe-args": 2,
"no-dupe-class-members": 2,
"no-dupe-keys": 2,
"no-duplicate-case": 2,
"no-duplicate-imports": 2,
"no-empty-character-class": 2,
"no-empty-pattern": 2,
"no-eval": 2,
"no-ex-assign": 2,
"no-extend-native": 2,
"no-extra-bind": 2,
"no-extra-boolean-cast": 2,
"no-extra-parens": [2, "functions"],
"no-fallthrough": 2,
"no-floating-decimal": 2,
"no-func-assign": 2,
"no-implied-eval": 2,
"no-inner-declarations": [2, "functions"],
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-iterator": 2,
"no-label-var": 2,
"no-labels": [
2,
{
allowLoop: false,
allowSwitch: false,
},
],
"no-lone-blocks": 2,
"no-mixed-spaces-and-tabs": 2,
"no-multi-spaces": 2,
"no-multi-str": 2,
"no-multiple-empty-lines": [
2,
{
max: 1,
},
],
"no-native-reassign": 2,
"no-negated-in-lhs": 2,
"no-new": 2,
"no-new-func": 2,
"no-new-object": 2,
"no-new-require": 2,
"no-new-symbol": 2,
"no-new-wrappers": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-octal-escape": 2,
"no-path-concat": 2,
"no-proto": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-return-assign": [2, "except-parens"],
"no-self-assign": 2,
"no-self-compare": 2,
"no-sequences": 2,
"no-shadow-restricted-names": 2,
"no-spaced-func": 2,
"no-sparse-arrays": 2,
"no-this-before-super": 2,
"no-throw-literal": 2,
"no-trailing-spaces": 2,
"no-undef": 2,
"no-undef-init": 2,
"no-unexpected-multiline": 2,
"no-unmodified-loop-condition": 2,
"no-unneeded-ternary": [
2,
{
defaultAssignment: false,
},
],
"no-unreachable": 2,
"no-unsafe-finally": 2,
"no-unused-vars": [
2,
{
vars: "all",
args: "none",
},
],
"no-useless-call": 2,
"no-useless-computed-key": 2,
"no-useless-constructor": 2,
"no-useless-escape": 2,
"no-whitespace-before-property": 2,
"no-with": 2,
"one-var": [
2,
{
initialized: "never",
},
],
"operator-linebreak": [
2,
"before",
{
overrides: {
"?": "before",
":": "before",
},
},
],
"padded-blocks": [2, "never"],
quotes: [2, "single", "avoid-escape"],
semi: [2, "never"],
"semi-spacing": [
2,
{
before: false,
after: true,
},
],
"space-before-blocks": [2, "always"], // function方法前面允许加空格
"space-before-function-paren": [0, "never"],
"space-in-parens": [2, "never"],
"space-infix-ops": 2,
"space-unary-ops": [
2,
{
words: true,
nonwords: false,
},
],
"spaced-comment": [
2,
"always",
{
markers: [
"global",
"globals",
"eslint",
"eslint-disable",
"*package",
"!",
",",
],
},
],
"template-curly-spacing": [2, "never"],
"use-isnan": 2,
"valid-typeof": 2,
"wrap-iife": [2, "any"],
"yield-star-spacing": [2, "both"],
yoda: [2, "never"],
},}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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
#8..babelrc
// .babelrc{
"plugins": [
"check-es2015-constants",
"es2015-arrow-functions",
"es2015-block-scoped-functions",
// ...
]}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
总结
了解 vue 项目创建过程以及其目录结构，每个目录的具体作用，在开发中需要注意的地方，能够更好地规范前端开发
