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

我会带着你远行 2021-11-10 00:42 404阅读 0赞

### 文章目录 ###

*  1. VSCode 通用编辑器
 *   *  1.1 软件安装
     *  1.2 软件卸载
     *  1.3 常用配置
 *  2. NVM 版本管理工具
 *   *  2.1 设置环境变量
     *  2.2 创建配置文件
     *  2.3 验证安装结果
 *  3. Node.js 运行环境
 *  4. Vue-cli 脚手架工具
 *  5. Webpack 打包工具
 *  6. ESLint 代码检查工具

# 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 版本

**修订记录：**

<table> 
 <thead> 
  <tr> 
   <th>日期</th> 
   <th>版本号</th> 
   <th>作者</th> 
   <th>修订内容</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>2019-8-1</td> 
   <td>1.0</td> 
   <td>moonspirit</td> 
   <td>创建文档</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>2019-8-5</td> 
   <td>1.1</td> 
   <td>moonspirit</td> 
   <td>内容修订</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>