Vue.js 学习笔记——开发环境

1. VSCode 通用编辑器

1.1 软件安装

目前，微软官方同时提供 User 和 System 两个版本的软件包，旨在区分普通用户和系统管理员，明确用户权限管理。User 版本软件的安装和使用无须管理员权限，默认安装在用户目录下，只对当前用户可见。在个人开发环境中，建议直接安装 System 版本软件，避免权限管理上的烦恼。

This User Installer is not meant to be run as an Administrator. If you would like to install VS Code for all users in this system, download the System Installer instead…

1.2 软件卸载

1. 卸载软件
2. 删除插件目录 C:\Users\moonspirit.vscode
3. 删除配置目录 C:\Users\moonspirit\AppData\Roaming\Code

1.3 常用配置

安装插件 Eclipse Keymap、Java Extension Pack、Maven for Java、Go、Vetur、ESLint、Prettier - Code formatter、npm。

Vetur 代码高亮，ESLint 检查代码语法，Prettier 代码格式化。

由于需要同时使用 Prettier 和 ESLint，而二者的代码规则可能存在冲突。例如，Prettier 字符串默认使用双引号，而 ESLint 使用单引号。解决方案是修改 Prettier 规则，使其与 ESLint 一致。

{
    "workbench.startupEditor": "newUntitledFile",
    // 修改 prettier 规则
    "prettier.eslintIntegration": true,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 4,
    // 配置文件关联
    "files.associations": {
        "*.vue": "vue"
    },
    // 保存时自动格式化
    "eslint.validate": [
        "html",
        "javascriptreact",
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": true,
    // 默认格式化工具
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

如果实在接受不了句末不加分号，在 .eslintrc.js 文件中添加 'semi': 0 规则。

2. NVM 版本管理工具

2.1 设置环境变量

set NVM_HOME=C:\Webserver\nvm
set NVM_SYMLINK=C:\Webserver\nodejs
set PATH=%PATH%;%NVM_HOME%;%NVM_SYMLINK%

2.2 创建配置文件

在 %NVM_HOME% 目录下创建 settings.txt 配置文件，内容如下：

root: C:\Softwares\nvm 
path: C:\Softwares\nodejs 
arch: 64 
node_mirror: https://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/ 

2.3 验证安装结果

nvm version         # 查看 nvm 版本

3. Node.js 运行环境

nvm list available  # 列出可安装的 nodejs 版本
nvm list            # 列出已安装的 nodejs 版本
nvm install latest  # 安装最新版本的 nodejs
nvm install 8.9.4   # 安装指定版本的 nodejs
nvm use 8.9.4       # 指定系统默认版本
npm --version       # 查看 npm 版本
node --version      # 查看 nodejs 版本

4. Vue-cli 脚手架工具

npm install -g vue-cli  # 全局安装 vue-cli
vue --version           # 查看 vue 版本

5. Webpack 打包工具

npm install -g webpack      # 全局安装 webpack
npm install -g webpack-cli  # 全局安装 webpack-cli
webpack --version           # 查看 webpack 版本

6. ESLint 代码检查工具

npm install -g eslint  # 全局安装 eslint
eslint --version       # 查看 eslint 版本

修订记录：

日期	版本号	作者	修订内容	备注
2019-8-1	1.0	moonspirit	创建文档
2019-8-5	1.1	moonspirit	内容修订