前端（Web）应用开发环境

Vue.js 是在宁皓独立开发者训练营中选择使用的前端应用框架，我们会基于 Vue.js 开发应用的前端，也就是可以通过浏览器使用的应用。

在本地准备好基于 Vue.js 框架的应用开发环境，可以先准备一个调试应用需要的 Chrome 浏览器，在系统里装好 Node.js，再安装一下 Vue.js 框架提供的命令行工具，用这个命令行工具创建一个 Vue.js 应用项目，启动项目的开发服务，再用 VSCode 打开这个项目，就可以开启本次训练营的前端应用开发之旅了。

Chrome

在训练营中，我们会使用 Chrome 浏览器测试基于 Vue.js 开发的前端应用。

安装 Chrome

Chrome 是 Google 公司开发的产品，在国内无法正常访问 Chrome 浏览器的官方网站，我们可以在百度搜索 Chrome 关键词，通过第三方网站下载这款浏览器。

开发者工具

Chrome 浏览器的开发者工具是前端工程师必备的工具之一，在训练营中，我们会在开发者工具里检查界面元素，在控制台查看输出的调试数据，在应用标签里查看本地存储等等。打开这个工具可以通过菜单视图 - 开发者 - 开发者工具。或者使用快捷键 alt + command + I（macOS）、ctrl + shift + I（Windows）。

界面语言

在开发者工具设置 - 偏好设置 里，打开语言这个下拉菜单，在这里可以选择开发者工具的界面使用的语言。

元素

在开发者工具的元素选项卡可以检查界面元素，比如定位元素在界面上的显示，应用在元素上的样式等等。

控制台

开发调试前端应用时，我们经常会使用 console.log() 在控制台上输出一些数据，在开发者工具的 控制台 标签里，可以查看前端应用输出到控制台上的数据。

应用

前端应用会在浏览器的本地存储里存储一些数据，在开发者工具应用标签的下面，可以在存储的下面，查看应用的 本地存储空间 里的数据。

Node.js

在训练营中开发 Vue.js 应用时，应用的开发服务与创建应用零部件需要的命令行工具都需要用到 Node.js。在准备服务端应用开发环境的时候，我们已经在系统里准备好了 Node.js。

Yarn

yarn 与 npm 一样，都可以作为 Node.js 项目的包管理工具。在开发 Node.js 服务端项目或者前端项目都会用到包管理工具，一般来说二选其一即可，在 NIDC（宁皓独立开发者训练营）中，开发服务端项目的时候会使用 npm 作为包管理工具，开发基于 Vue.js 框架的前端应用时，会使用 yarn 作为项目的包管理工具。

官方网站：https://yarnpkg.com/

安装 Yarn

以前需要用 npm 安装 yarn，现在 yarn 这个包管理工具包含在版本 >=16.10 的 Node.js 里，在终端执行一下：

corepack enable

如果使用的 Node.js 版本 <16.10，可以在全局范围安装一下 corepack：

npm install corepack --global

完成以后，应该就可以使用 yarn 这个包管理工具了。

yarn --help

Vue.js

在 NIDC（宁皓独立开发者训练营）中，我们会使用 Vue 提供的命令行工具，比如去创建全部的 Vue 项目，启动本地开发服务，编译生成在生产环境上使用的应用等等。

Vue CLI 命令行工具

在全局范围安装一下 Vue CLI 这个包，这样就可以在任何地方使用 vue 命令了。

npm install @vue/cli --global

在终端，用 npm 在全局范围安装一个叫 @vue/cli 的东西，这个 @vue/cli 是软件包的名字，Vue 官方提供的软件包，很多都有 @vue 这个前缀。安装完成以后，执行 vue -h ，如果能正常的看到命令的帮助信息，就说明成功地安装了 Vue CLI。

使用 Vue CLI 创建项目

在全局范围安装了 @vue/cli 这个软件包以后，可以使用 vue 这个命令，我们可以使用它创建一个 Vue 项目。

cd ~/desktop
vue create nid-vue

进入到想要保存项目的地方以后，执行 vue create 命令创建一个名字是 nid-vue 的 Vue 项目，这个命令会问一些问题。

? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
❯ Manually select features

首先可以选择一个项目的预设（preset），选择 Default Vue 3 会创建一个默认的使用 3.x 版本的 Vue 项目。我们可以选择 Manually select features（手动选择功能），用键盘的上下箭头按键可以选择，按下回车确定选择。如果选择手动选择功能，会让我们继续选择项目需要的一些功能，按空格按键可以切换选择功能，比如可以将 TypeScript、Router、Vuex 这几个功能选上，按回车继续下一步。

? Choose a version of Vue.js that you want to start the project with
❯ 3.x
  2.x

这一步是选择要使用的 Vue 版本，默认选择 3.x。

? Use class-style component syntax? (y/N)

是否选择类风格的组件，默认是 N，表示不选择。

? Use Babel alongside TypeScript? (Y/n)

是否要使用 Babel，可以选择使用 Babel。

? Use history mode for router? (Y/n)

是否使用历史模式的路由器，选择使用这种模式的路由器。

? Pick a linter / formatter config:
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择检查器与格式化器的配置，可以选择默认的 ESLint with error prevention only。

? Pick additional lint features:
❯◉ Lint on save
 ◯ Lint and fix on commit

选择额外的检查功能，可以选中 Lint on save，然后按回车继续。

? Save this as a preset for future projects? (y/N)

是否保存为预设，这样以后使用 vue create 命令创建 Vue 项目的时候，可以直接选择使用这个预设，输入 N ，按下回车，表示不保存为预设。

🎉  Successfully created project nid-vue.
👉  Get started with the following commands:

 $ cd nid-vue
 $ yarn serve

Vue CLI 会根据我们做出的选择将 Vue 项目准备好，成功以后会提示 Successfully created project ...

启动本地开发服务

使用 Vue CLI 成功创建了一个 Vue 项目以后，可以使用 VSCode 编辑器打开这个项目。然后可以在终端启动这个 Vue 项目的开发服务，这样就可以在浏览器通过一个本地的地址访问到我们正在开发的 Vue 项目，在编辑器修改项目，保存项目文件以后，在浏览器上显示的应用会实时更新，显示修改之后的项目。