Vue入门，从扫雷开始 - 搭建 Vue 开发环境 (2/7)

Vue 的开发利用了 nodejs 的便利性，通过 npm 可以获取很多第三方的代码，同时，npm 也是开发时的命令工具入口。

注：以后将 NodeJS 均称作 node

安装 node

去搜索 nodejs ，然后下载系统版本对应的安装包，然后安装。

npm 基本用法

npm 即 node package Manager，其实这是一个 javascript 包的管理工具，并不限用 node 的包。

在 node 安装成功后，会自动安装上 npm ，此时的 npm 可能不是最新的版本，你可以通过命令来安装最新的 npm

npm i npm@latest -g

常用命令如下:

npm init <project>

创建一个名为 project 的 node 项目

npm install <package>[@<version>] [--save|--save-dev]

向当前项目安装包 package；install 表示安装命令，可以缩写成 i ；@<version> 是要安装的版本号，留空表示安装最新版本；--save 是指要安装的包记录写入 package.json 文件中的依赖节点(dependencies)；--save-dev 功能同 --save，但会将记录写入开发依赖节点(devDependencies)，表示此包是开发时使用的，并不是产品上使用的。平时在安装包时，若没有特别需要，只需要 npm i <package> 就可以了

npm run <command> 执行 package.json 中 scripts 节点下的命令。在使用 Vue 的时候，会常常用到 npm run dev 或 npm run serve

当然，也可以使用 yarn 作为包管理工具(这也是 Vue 官方推荐的工具)，其用法此处略过

Vue cli 是 Vue 官方提供的一整套脚手架，用于创建和管理 Vue 项目。通过以下命令来安装

npm i @vue/cli -g

安装后，可以通过以下命令测试安装结果

vue --version

此时应该会显示当前的 vue cli 版本号。

本质上，Vue 并不挑开发工具，即使是轻量如 nodepad 也能胜任。但是，使用 IDE 能得到极大的便利，包括静态错误检查以及智能提示。、

WebStorm 本应该是首选的 IDE，不过是收费的，而且安装包也很大，相比之下 VS Code 就更加平民化了。

好吧，去搜索 vs code ，然后安装吧。安装好后，还需要安装 Vetur 插件以支持 Vue 语法，以及 ESLint 插件，以支持静态检查。

代码格式化快捷键： Shift Alt F ，后面会用到的

Vue 提供了浏览器上的开发插件，用于审查 Vue 的组件，数据，事件以及性能等。

目前此插件支持 Chrome, Firefox, Electron.

1. 安装方法一: 上 github 搜索 vue-devtools， 自动通过源码编译。使用源码编译时，先移除 package.json 中的测试相关项，这样能避免编译失败。移除 release 项中的 npm run test命令移除 所有 test 开头的命令移除 devDependencies 节点下的依赖包 cypress生成插件，执行命令 npm run build
2. 安装方法二: 上应用商店搜索安装

本节完