2. 创建工作环境

我们将沿用文档 [2] 中详细描述的工作环境：

使用 Visual Studio Code (VSCode) 编写代码 JavaScript；
使用 [node.js] 运行代码；
使用 [npm] 下载并安装所需的 JavaScript 库；

我们在 [VSCode] 中创建工作环境：

在 [1-5] 中，我们在 [VSCode] 内创建一个空文件夹 [vuejs]；

在 [8-10] 中，安装依赖项 [@vue/cli]，这将使我们能够初始化项目 [vue.js]。该依赖项会引入大量包（数百个）；

在同一终端中，接着输入命令 [vue create .]，该命令要求在当前目录（.）中创建一个名为 [vue.js] 的项目：

在 [13] 中，将开始一系列用于配置项目的提问；

回答完所有问题后，将下载新的软件包，并在当前目录中生成项目 [14]。

让我们看看生成了什么。文件 [package.json] 内容如下：


{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve vuejs-20/main.js",
    "build": "vue-cli-service build vuejs-20/main.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.2",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

注释

第14-22行：在开发所需的依赖项中，可以看到对前两章中已使用的两个工具[eslint, babel]的引用。此外，还包含这两个工具的插件，用于在[vue.js]中使用；
第34行：[babel-eslint]包将负责对jS代码执行ES6 -> ES5的转译；
第5-9行：已创建三个[npm]任务：
- [build]：用于构建项目已编译版本，准备投入生产环境；
- [serve]：在Web服务器上运行该项目。开发过程中的测试即通过此工具进行。与[webpack-dev-server]类似，项目源代码的任何修改都会自动触发项目的重新编译，并由Web服务器重新加载；
- [lint]：用于分析 jS 生成的代码并生成报告。本文中我们将不使用此工具；

已生成一个名为 [README.md] 的文件，内容如下：

# Vue.js

## 项目设置
```
npm install
```

### 开发环境下的编译和热重载
```
npm run serve
```

### 生产环境的编译和压缩
```
npm run build
```

### 运行测试
```
npm run test
```

### 代码检查与文件修复
```
npm run lint
```

### 自定义配置
See [Configuration Reference](https://cli.vuejs.org/config/)。

该文件总结了用于管理项目的命令。

我们知道在 [VSCode] 中，系统建议执行 [npm] 任务：

在 [1-3] 中，我们执行命令 [serve]，该命令将编译并执行项目 [4-5]；

在 URL 和 [http://localhost:8080] 之后，我们得到以下页面：

稍后我们将详细说明导致生成此页面的原因。

继续配置我们的工作环境：

在上方的 [2] 中，我们可以看到 [git] 的标记。[git] 是一个源代码管理工具，用于管理源代码的各个版本并在开发人员之间共享。我们将为该项目禁用此工具；
在 [3-5] 中，我们进入项目属性；

在 [9-10] 中，禁用该项目中 [git] 的使用；

我们将编写各种测试来展示 [vue.js] 的运行情况。但我们不想每次都创建新项目，因为那样每次都需要生成一个[node_modules]文件夹，而该文件夹大小达数百兆字节。让我们回到[package.json]文件中的[npm]任务：


  "scripts": {
    "serve": "vue-cli-service serve vuejs-00/main.js",
    "build": "vue-cli-service build vuejs-00/main.js",
    "lint": "vue-cli-service lint"
  },

第2行：命令[serve]默认使用：
- 文件 [public/index.html]；
- 关联文件为 [src/main.js]；

第 2 行，可以在 [serve] 命令中指定项目的入口点，例如：


"serve": "vue-cli-service serve vuejs-00/main.js",

试一下：

在 [1] 中，文件夹 [src] 已重命名为 [vuejs-00]；
在 [2-3] 中，修改了 [serve] 命令；
在 [4-6] 中，执行该项目；

结果与之前相同：

因此，在测试中我们将按以下步骤进行：

在项目的 [vuejs-xx] 文件夹中编写代码；
在文件 [package.json] 中使用命令 [vue-cli-service serve vuejs-xx/main.js] 对该项目进行测试；

当开发服务器启动时，项目中任何文件的修改都会触发重新编译。因此，我们将 [VSCode] 的 [Auto Save] 模式设为禁用。因为我们不希望在项目文件中输入字符时立即触发重新编译。我们仅希望在特定时刻进行重新编译：

在 [2] 中，[Auto Save] 选项不应被勾选；