一、先要安装node.js

官网：
https://nodejs.org/zh-cn/download/

二、设置nodejs prefix（全局）和cache（缓存）路径
1、在nodejs安装路径下，新建node_global和node_cache两个文件夹

2、设置缓存文件夹

npm config set cache “D:\vueProject\nodejs\node_cache”
　设置全局模块存放路径

npm config set prefix “D:\vueProject\nodejs\node_global”
设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里

三、基于 Node.js 安装cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org
四、设置环境变量（非常重要）

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

2、修改系统变量PATH


3、新增系统变量NODE_PATH

五、安装Vue

cnpm install vue -g

六、安装vue命令行工具，即vue-cli 脚手架

安装新的Vue cli版本前，需要先把之前安装的版本卸载掉。

vue卸载：npm uninstall vue-cli -g（3.0以下版本卸载）

npm uninstall -g @vue/cli（3.0以上版本卸载）

vue安装：npm install -g vue/cli （安装的是最新版）

npm install vue-cli@2.9.6 （指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本 号）

npm install -g @vue/cli （安装的是3.0以上最新版）

npm install -g @vue/cli@3.11.0（指定版本安装【指定版本为3.0以上版本】，其中3.11.0为 版本号）

vue版本查看：vue -V

七、新项目的创建

1.打开存放新建项目的文件夹

打开开始菜单，输入 CMD，或使用快捷键 win+R，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录

2.根据模版创建新项目

2.1 Vue3.0以下创建新项目

在当前目录下输入“vue init webpack-simple 项目名称（使用英文）”。

vue init webpack-simple mytest

2.1 Vue3.0以上创建新项目

在当前目录下输入“vue create Project Name（使用英文）”。

vue create //文件名 不支持驼峰（含大写字母）
具体操作如下：

首先，会提示你选择一个preset（预设）：

① 除最后两个，其他选项都是你此前保存的预设配置（如下图第一个“ my-default”是我之前保存的预设配置，如今便可以直接用了）：

如果没有配置保存过，则只有以下两个选项：

② default（babel，eslint）：默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包

③ Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

手动选择需要添加的配置项：
1 ? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
2 >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
5 ( ) Router // vue-router（vue路由）
6 ( ) Vuex // vuex（vue的状态管理模式）
7 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
9 ( ) Unit Testing // 单元测试（unit tests）
10 ( ) E2E Testing // e2e（end to end） 测试

选择完后直接enter，然后会提示你选择对应功能的具体工具包，选择自己擅长或者使用广泛的（方便遇到问题时百度），简介如下：

①是否使用history router：

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

② css预处理器
主要为css解决浏览器兼容、简化CSS代码 等问题

③ ESLint：
提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多

④ 何时检测：

⑤ 单元测试 ：

? Pick a unit testing solution: (Use arrow keys)

Mocha + Chai //mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest //安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
⑥ 如何存放配置 ：

⑦ 是否保存本次配置（y:记录本次配置，然后需要你起个名; n：不记录本次配置）：

⑧ 搭建完成：

未完待更新…