环境安装准备

Ps：个人习惯

安装环境

1. 安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。(nvm版本切换更好)
2. 这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。
   安装淘宝镜像，打开命令行工具，把这个（npm install -g cnpm --registry=https://registry.npm.taobao.org），安装这里是因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。
3. 安装webpack，打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。
4. 安装vue-cli脚手架构建工具，打开命令行工具输入：npm install @vue/cli -g（npm install -g @vue/cli@4.5.15），安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。
   ps：2.9.6失败，一、卸载npm uninstall vue-cli -g 重新安装npm install @vue/cli -g。 二、需要改变环境变量的系统变量
   5.安装git，vue ui可视化创建项目
5. 安装sourceTrue可视化git
6. 美工蓝湖；产品石墨，axure；测试teambition
7. 安装截图软件Snipaste

VSCode setting

{
  // tab 大小为2个空格
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrapColumn": 200,
  // 保存时格式化
  "editor.formatOnSave": false,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // prettier 设置语句末尾不加分号
  "prettier.semi": false,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  // prettier 设置尾部单引号
  "prettier.trailingComma":"none",
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // 显示 markdown 中英文切换时产生的特殊字符
  "editor.renderControlCharacters": true,
  "javascript.format.insertSemicolons":false,
  // 设置 eslint 保存时自动修复
    // 启用保存时自动修复eslint,默认只支持.js文件
  // "editor.codeActionsOnSave": {
  //   "source.fixAll.eslint": true
  // },
  "less.compile": {   
    "compress": false, // 是否压缩
    "sourceMap": false, // 是否生成map文件，有了这个可以在调试台看到less行数
    "out": true, // 是否输出css文件，false为不输出
  },
  // eslint 检测文件类型
  "eslint.validate": [
     "vue",
     "html",
     "javascript",
     "typescript",
     "javascriptreact",
     "typescriptreact"
  ],
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "eslintIntegration":false//不让prettier使用eslint的代码格式进行校验
    }
  },
  // vue 扩展的文件默认使用 prettier 进行格式化
   "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "cssrem.rootFontSize": 100,
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.codeActionsOnSave": {},
  "workbench.colorTheme": "Monokai Dimmed",
  "editor.fontZoom": -1
}

vuec快捷代码

{
  // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  //   "prefix": "log",
  //   "body": [
  //     "console.log('$1');",
  //     "$2"
  //   ],
  //   "description": "Log output to console"
  // }
  "Print to console": {
    "prefix": "vuec",
    "body": [
      "<template>",
      "  <div>",
      "    $0",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name:'componentName',",
      "",
      "  data () {",
      "    return {",
      "    }",
      "  },",
      "",
      "  methods: {},",
      "",
      "    //生命周期 - 创建完成（访问当前this实例）",
      "  created () {",
      "  }",
      "}",
      "</script>",
      "",
      "<style lang='' scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Log output to console"
  }
}

nvm

一、nvm介绍

同一台设备上进行多个node版本之间切换。

二、nvm下载安装及使用

2.1 nvm下载
https://link.youkuaiyun.com/?target=https%3A%2F%2Fpan.baidu.com%2Fs%2F1EUc-e2Ai-lXXQkjlB8jmlA
提取码：vg9l
2.2 nvm的使用
nvm off // 禁用node.js版本管理(不卸载任何东西)
nvm on // 启用node.js版本管理
nvm install // 安装node.js的命名 version是版本号 例如：nvm install 8.12.0
nvm uninstall // 卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用
nvm ls // 显示所有安装的node.js版本
nvm list available // 显示可以安装的所有node.js的版本
nvm use // 切换到使用指定的nodejs版本
nvm v // 显示nvm版本
nvm install stable // 安装最新稳定版
现在使用版本
低版本 10.15.3
高版本 18.0.0