我是如何初始化一个 vue 的项目的

sicker in 移动智地

2021-11-22

预计阅读时间：4.39 min

共计：1317 字

最后修改时间：11 days ago

# 风格指南

组件名应尽量使用多单词组合，避免撞车关键词如班级学生组件，我将采用 klass-student 而避免使用 class 或者 student
prop 使用参数校验
只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
模板中的组件名大小写使用小写+横线连接的形式如 my-component
JS 、 VUE 文件命名遵循横线连接

官方风格 (opens new window)

vue-element-admin (opens new window)

# 使用 vue-cli

全局安装组件

npm install -g @vue/cli

创建项目

vue create hello-world

安装组件（自定义，需要逐个安装）

vue add eslint [router vuex]

# 初始化项目

继续通过 npm 安装

npm i -D sass@1.26.2 sass-loader@8.0.2

建设 scss 公共路径

mkdir src/assets/scss && touch src/assets/scss/index.scss

新建 vue.config.js 配置文件

touch vue.config.js

键入简单 webpack 初始化配置

const port = process.env.port || process.env.npm_config_port || 8888 // dev port
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/scss/index.scss";`
      }
    }
  },
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // before: require('./mock/mock-server.js')
  },
  publicPath: './',
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

配置代码格式

配置 vscode

安装 vscode 组件 vetur EditorConfig for VS Code ESLint Prettier - Code formatter 图 1
修改 VSCode setting.json

# 关闭自动保存
"files.autoSave": "off",
# 保存时美化文件
"editor.formatOnSave": true,
# 窗口缩放等级
"window.zoomLevel": 1,
# eslint 配置
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
],
# 保存时运行
"eslint.run": "onSave",
# 保存时自动尝试修复
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
# eslint 包管理
"eslint.packageManager": "yarn",
# vetur format 使用单引号、错误级别；
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "singleQuote": true,
        "semi": false
    }
},
"files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
},
"emmet.includeLanguages": {
    "wxml": "html"
},
# VSCode 默认终端
"terminal.integrated.profiles.windows":{
    "Git-Bash": {
        "path": "C:\\Program Files\\Git\\bin\\bash.exe"
    }
},
"terminal.integrated.defaultProfile.windows": "Git-Bash",
# 树形菜单缩进
"workbench.tree.indent": 20

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

配置 .editorconfig

touch .editorconfig

键入

# https://editorconfig.org
root = true

[*]
charset = utf-8
# 缩进方式
indent_style = space
# 缩进空格数
indent_size = 2
# 定义换行符
end_of_line = lf
# 文件是否以空白行结尾
insert_final_newline = true
# 是否去处行首行尾的空白字符
trim_trailing_whitespace = true

[*.md]
# 保存文件时是否在结尾添加一个新行
insert_final_newline = false
# 在新行之前是否移除所有的空格字符
trim_trailing_whitespace = false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

配置 elsint

touch .eslintrc.js

键入

module.exports = {
    root: true,
    parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
    },
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    extends: ['plugin:vue/recommended', 'eslint:recommended'],

    // add your custom rules here
    //it is base on https://github.com/vuejs/eslint-config-vue
    rules: {
        "vue/max-attributes-per-line": [2, {
            "singleline": 10,
            "multiline": {
                "max": 1,
                "allowFirstLine": false
            }
        }],
        "vue/singleline-html-element-content-newline": "off",
        "vue/multiline-html-element-content-newline": "off",
        "vue/name-property-casing": ["error", "PascalCase"],
        "vue/no-v-html": "off",
        'accessor-pairs': 2,
        'arrow-spacing': [2, {
            'before': true,
            'after': true
        }],
        'block-spacing': [2, 'always'],
        'brace-style': [2, '1tbs', {
            'allowSingleLine': true
        }],
        'camelcase': [0, {
            'properties': 'always'
        }],
        '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': ["error", "always", { "null": "ignore" }],
        'generator-star-spacing': [2, {
            'before': true,
            'after': true
        }],
        'handle-callback-err': [2, '^(err|error)$'],
        'indent': [2, 2, {
            'SwitchCase': 1
        }],
        '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-console': 'off',
        'no-class-assign': 2,
        'no-cond-assign': 2,
        'no-const-assign': 2,
        'no-control-regex': 0,
        'no-delete-var': 2,
        'no-dupe-args': 2,
        'no-dupe-class-members': 2,
        'no-dupe-keys': 2,
        'no-duplicate-case': 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-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': 0,
        'no-whitespace-before-property': 2,
        'no-with': 2,
        'one-var': [2, {
            'initialized': 'never'
        }],
        'operator-linebreak': [2, 'after', {
            'overrides': {
                '?': 'before',
                ':': 'before'
            }
        }],
        'padded-blocks': [2, 'never'],
        'quotes': [2, 'single', {
            'avoidEscape': true,
            'allowTemplateLiterals': true
        }],
        'semi': [2, 'never'],
        'semi-spacing': [2, {
            'before': false,
            'after': true
        }],
        'space-before-blocks': [2, 'always'],
        'space-before-function-paren': [2, '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'],
        'prefer-const': 2,
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'object-curly-spacing': [2, 'always', {
            objectsInObjects: false
        }],
        'array-bracket-spacing': [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

touch .eslintignore

键入

build/*.js
src/assets
public
dist

1
2
3
4

配置 git 代码忽略

touch .gitignore

键入

.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
**/*.log

tests/**/coverage/
tests/e2e/reports
selenium-debug.log

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.local

package-lock.json
yarn.lock

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

- 全文完 -

我是如何初始化一个 vue 的项目的

# 风格指南

# 使用 vue-cli

# 初始化项目

主题颜色

标准颜色

更多颜色...