VUE开发说明书简单版

VUE开发说明书简单版
1.所需环境，NodeJs
2.项目架构：VUE+VUEX+VueRouter+element
Vue官方文档：https://cn.vuejs.org/
Element官方文档：https://element.eleme.cn/#/zh-CN
本项目官方文档：https://docs.auauz.net/
Vue插件大全：https://github.com/opendigg/awesome-github-vue
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
增加用户区配置，注意别跟已有的冲突：
“editor.quickSuggestions”: {
    “strings”: true
  },
  “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.代码示例：