1. 所需环境，NodeJs
2. 项目架构：VUE+VUEX+VueRouter+element
Vue官方文档：cn.vuejs.org/
Element官方文档：element.eleme.cn/#/zh-CN
本项目官方文档：docs.auauz.net/
Vue插件大全：github.com/opendigg/aw…
3. 建议采用开发工具Vscode。
需要安装的插件：
Auto Close Tag
Auto Rename Tag
Bracket Pair Clolr
Chinese
Copy Relative Path
ESLint
Meterial Icon Theme
npm Intellisense
path Intellisense
Prettier - Code formatter
Vetur 用0.22.6 版本手动安装
vscode-element-helper
Vue Peek
Vue VSCode Snippets
增加用户区配置，注意别跟已有的冲突：
"files.associations": {
"*.vue": "vue"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"editor.suggest.snippetsPreventQuickSuggestions": false,
"[javascript]": {
"editor.defaultFormatter": "octref.vetur"
},
"extensions.autoCheckUpdates": true,
//禁止自动更新插件
"extensions.autoUpdate": false
增加工作区配置：
{
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"workbench.settings.useSplitJSON": true,
//配置eslint
"eslint.run": "onSave",
"files.autoSave": "off",
"eslint.options": {
"plugins": ["html"]
},
// #每次保存的时候自动格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
//为了符合eslint的两个空格间隔原则
"editor.tabSize": 2,
"editor.formatOnSave": true,
// #让prettier使用eslint的代码格式进行校验
"vetur.format.defaultFormatterOptions": {
"prettier": {
// 格式化不加分号
"semi": false,
// 格式化为单引号
"singleQuote": true
}
},
// 自动格式化粘贴的代码
"editor.formatOnPaste": true,
"editor.quickSuggestions": {
//开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"vetur.validation.template": false,
"javascript.suggest.enabled": true,
"editor.detectIndentation": true,
"emmet.includeLanguages": {
"vue": "html",
"vue-html": "html"
},
// 控制在活动代码片段内是否禁用快速建议。
"editor.suggest.snippetsPreventQuickSuggestions": false,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"typescript.disableAutomaticTypeAcquisition": true
}
上面的配置作用为增加代码提示，并按照项目Eslint格式在保存时自动格式化代码。
4. 代码示例：
