安装node.js

1. 下载https://nodejs.org/zh-cn/download/ 安装到目录D:\nodejs（自定义，不能有空格、中文、特殊字符）
2. 配置环境变量，将安装目录加入Path环境变量
3. 配置npm

   1. 在安装目录新建 node_cache 和 node_global 两个文件夹，并将node_global路径加入Path环境变量

         //配置全局模块存放路径npm config set prefix "D:\nodejs\node_global"//配置缓存文件存放路径npm config set cache "D:\nodejs\node_cache"
      

   2. 使用阿里镜像：

      npm install --registry=https://registry.npm.taobao.org
      

   3. npm config set msvs_version 2015

安装python2

1. 下载python 2.7.17 并安装，位置D:\Python27。
2. 配置环境变量 变量名：python2，变量值：D:\Python27

安装包

1. 全局安装 eslint 包

        //安装npm i -g eslint//检查是否安装成功，列出已安装的包npm -g ls
   

2. 全局安装 prettier 包

        //安装npm i -g prettier//检查是否安装成功，列出已安装的包npm -g ls
   

3. 安装 eslint-config-prettier
   使eslint可以使用prettier格式配置，解决eslint，prettier冲突
4. 安装 eslint-plugin-prettier
   使eslint可以提示prettier格式化错误
5. 安装 eslint-plugin-vue
   使eslint可以校验.vue,.js中的<template> 和<script>元素

下载 vs code

安装插件

1. 必装
   • eslint：代码质量检查，代码风格检查工具
   • prettier：代码格式化工具，和eslint会有格式配置冲突
   • vetur：vue代码高亮显示，提示，格式化工具
   • chinese：中文语言包
   • vscode-icons：图标主题
   • Git Graph：类似eclipse 分支图
   • Git History：查看文件历史记录
   • Local History：本地修改记录
2. 可装：
   • Open in Browser：在浏览器中打开
   • Regex Previewer：预览正则表达式效果
   • npm Intellisense：npm 自动代码提示、补充
   • Turbo Console Log：自动console.log
   • CSS Peek：查看css定义（vue css定位不到）
   • Path Intellisense：路径和文件名提示、补充
   • Auto Rename Tag：自动重命名标签
   • Code Spell Checker：单次拼写错误提示
   • Svg Preview：svg图片预览
   • vscode-pigments：实时预览设置的颜色
   • Image preview：引入路径为图片时，可以实时预览
   • Project Manager：多项目切换工具
   • vue-helper：跳转查看element-ui源码

vue 调试配置

1. 安装 Vue.js devtools 浏览器插件

新建或修改jsconfig.json文件（解决路径问题）

    {"include": ["./src/**/*"],"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["src/*"]}},"exclude": ["node_modules", "dist", "build","prodDist"]}

配置文件修改
文件-> 首先项->配置文件->显示内容/创建配置文件->打开或创settings.json，内容如下。（如果失败则直接编辑系统中的settings.json文件）

   {// 是否允许自定义的snippet片段提示"editor.snippetSuggestions": "top",// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 4,// #每次保存的时候自动格式化"editor.codeActionsOnSave": {"source.fixAll.eslint": true},// #每次保存的时候将代码按eslint格式进行修复"editor.fontWeight": "400","editor.formatOnType": false,"git.confirmSync": false,"team.showWelcomeMessage": false,"window.zoomLevel": 0,// "editor.renderWhitespace": "boundary","editor.renderWhitespace": "none","editor.cursorBlinking": "smooth","editor.minimap.enabled": true,"editor.minimap.renderCharacters": false,"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}","editor.codeLens": true,//eslint 代码自动检查相关配置"eslint.enable": true,"eslint.run": "onType","eslint.options": {"extensions": [".js", ".vue"]},// 添加 vue 支持"eslint.validate": ["javascriptreact", "vue", "javascript", "html"],// #让prettier使用eslint的代码格式进行校验"prettier.eslintIntegration": true,// #这个按用户自身习惯选择"vetur.format.defaultFormatter.html": "prettier",// #让vue中的js按编辑器自带的ts格式进行格式化"vetur.format.defaultFormatter.js": "prettier","explorer.confirmDelete": false,"files.associations": {"*.cjson": "jsonc","*.wxss": "css","*.wxs": "javascript","*.tpl": "html"},"emmet.includeLanguages": {"wxml": "html"},"window.menuBarVisibility": "visible","git.enableSmartCommit": true,"git.autofetch": true,"liveServer.settings.donotShowInfoMsg": true,"javascript.updateImportsOnFileMove.enabled": "always","editor.fontSize": 14,"search.followSymlinks": false,"workbench.sideBar.location": "left","zenMode.restore": true,"breadcrumbs.enabled": true,"editor.formatOnPaste": false,"editor.cursorStyle": "line-thin","eslint.codeAction.showDocumentation": {"enable": true},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"terminal.integrated.tabs.enabled": true,"editor.rulers": [],"auto-rename-tag.activationOnLanguage": ["html","xml","php","javascript","vue","*"],"editor.fontLigatures": false,"workbench.iconTheme": "vscode-icons","git-graph.commitDetailsView.fileView.type": "File List","git-graph.commitDetailsView.location": "Docked to Bottom","git-graph.defaultColumnVisibility": {"Date": true,"Author": true,"Commit": true},// 本地历史记录保存位置"local-history.path": "D:\\vscode_local_history",//打开文件时，默认进入编辑模式"workbench.editor.enablePreview": false,"npm.exclude": "","editor.formatOnSave": true,"git.suggestSmartCommit": false,"git-graph.dialog.rebase.launchInteractiveRebase": true,"projectManager.git.baseFolders": ["D:\\vscode_git"],"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[vue]": {"editor.defaultFormatter": "octref.vetur"}}