这里系统是windows，先安装node(新版的Node.js已自带npm)，然后使用npm安装vue，这里没有使用nvm。
【1】node安装
官网地址：https://nodejs.org/en/download/
下载后傻瓜式安装即可，具体教程可以参考：node.js安装配置
默认会配置node和npm的环境变量：
安装后会自动提示如下，这里可以直接关闭窗口。
我们可以看到环境变量中已经包含了C:\Program Files\nodejs\：
检测安装的node版本：
检测安装的npm版本：
OK，接下来就可以安装VUE官方提供的命令行工具 (CLI)–脚手架。
安装webpack
npm install --global webpack
npm install --global webpack-cli
【2】安装Vue
① 安装cnpm
由于 npm 安装速度慢，这里使用了淘宝的镜像及其命令 cnpm。
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 当然也可以直接设置镜像 如下所示
npm config set registry https://registry.npm.taobao.org
#npm info 命令可以查看每个模块的具体信息。比如，查看 underscore 模块的信息。
npm info underscore
② 使用cnpm安装vue
cnpm install vue
# or
npm install vue
③ 使用cnpm安装vue-cli
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI的文档。
cnpm install --global vue-cli
# or
npm install --global vue-cli
④ 检测vue版本
vue --version
更多操作选项参考下图：
⑤ 设置npm使用淘宝镜像(这一步也可以跳过)
因为vue命令去初始化项目的时候实际上还是使用的是npm去安装各种模块，并没有使用cnpm，所以还是先设置npm使用淘宝中的镜像比较快。
//设置镜像
npm config set registry https://registry.npm.taobao.org
//npm info 命令可以查看每个模块的具体信息。比如，查看 underscore 模块的信息。
npm info underscore
【3】创建并运行vue项目
① 创建工作空间，初始化第一个demo
如这里创建了D:\vueworkspace作为vue项目文件夹。
② 初始化项目
vue init webpack vueDemo会有一些交互操作如下(回车，输入Y或者n进行交互)：
? Project name vuedmeo
? Project description a vue project
? Author jane
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
最后一步需要注意，如果默认选择，则它会自动帮你下载。否则你就得需要进入到项目目录，手动下载。
cd vueDemo
npm install安装完成如下(这个过程可能比较慢)：
这时你可以选择在项目文件路径下，使用 npm run dev命令启动项目。
也可以选择使用IDE比如webstorm打开项目，如下图所示：
使用终端命令启动：
浏览器访问：http://localhost:8080
也可以在package.json上右键-Show npm Scripts:
如下所示，双击dev或者start都可以
③ vue项目目录结构
- build – 大部分是webpack的配置文件
- config – 配置文件，比如配置监听端口
- node_modules – 依赖包都在这里
- src – 主工程文件夹，基本上所有的开发都在这个文件夹进行
- static – 静态文件目录
- package.json – 项目的一些配置信息
build // 项目构建(webpack)相关代码
build.js // 生产环境构建代码
check-versions.js // 检查node&npm等版本
dev-client.js // 热加载相关
dev-server.js // 构建本地服务器
utils.js // 构建配置公用工具
vue-loader.conf.js // vue加载器
webpack.base.conf.js // webpack基础环境配置
webpack.dev.conf.js // webpack开发环境配置
webpack.prod.conf.js // webpack生产环境配置
config// 项目开发环境配置相关代码
dev.env.js // 开发环境变量
index.js //项目一些配置变量
prod.env.js // 生产环境变量
node_modules// 项目依赖的模块
src// 源码目录
assets// 资源目录 logo.png
components// vue公共组件 Hello.vue
router// 前端路由 index.js// 路由配置文件
App.vue// 页面入口文件（根组件）
main.js// 程序入口文件（入口js文件）
static// 静态文件，比如一些图片，json数据等
.gitkeep
剩余
.babelrc// ES6语法编译配置
.editorconfig// 定义代码格式
.gitignore// git上传需要忽略的文件格式
index.html// 入口页面
package.json// 项目基本信息
README.md// 项目说明【4】npm与cnpm
① npm
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用
npm命令
- npm -v 来测试是否成功安装
- 查看当前目录已安装插件：
npm list - 更新全部插件：
npm update [ --save-dev ] - 使用 npm 更新对应插件：
npm update <name> [ -g ] [ --save-dev] - 使用 npm 卸载插件：
npm uninstall <name> [ -g ] [ --save-dev ]
② cnpm
淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
安装：命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org可以使用cnpm -v 来测试是否成功安装。
通过改变地址来使用淘宝镜像，npm的默认地址是https://registry.npmjs.org/。
- 可以使用
npm config get registry查看npm的仓库地址 - 可以使用
npm config set registry https://registry.npm.taobao.org来改变默认下载地址，达到可以不安装cnpm就能采用淘宝镜像的目的，然后使用上面的get命令查看是否成功。
③ -g -S -D
npm install=npm i。在git clone项目的时候，项目文件中并没有 node_modules文件夹，项目的依赖文件可能很大。直接执行，npm会根据package.json配置文件中的依赖配置下载安装。
-global=-g，全局安装，安装后的包位于系统预设目录下。
--save=-S，安装的包将写入package.json里面的dependencies，dependencies：生产环境需要依赖的库。
--save-dev=-D，安装的包将写入packege.json里面的devDependencies，devdependencies：只有开发环境下需要依赖的库
-g：全局安装。
将会安装在C盘用户家目录\AppData\Roaming\npm，并且写入系统环境变量；非全局安装：将会安装在当前定位目录;全局安装可以通过命令行任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过要求调用;
-S：即npm install module_name --save,写入package.json的dependencies ,dependencies 是需要发布到生产环境的，比如jq，vue全家桶，ele-ui等ui框架这些项目运行时必须使用到的插件就需要放到dependencies
-D：即npm install module_name --save-dev,写入package.json的devDependencies ,devDependencies 里面的插件只用于开发环境，不用于生产环境。比如一些babel编译功能的插件、webpack打包插件就是开发时候的需要，真正程序打包跑起来并不需要的一些插件。
为什么要保存在package.json 因为node_module包实在是太大了。用一个配置文件保存，只打包安装对应配置文件的插件，按需导入。
④ npm install
npm install的几种常见方式：
# 安装模块到项目目录下
npm install moduleName
#-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。
npm install -g moduleName
# --save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
npm install --save moduleName
# 将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
npm install --save-dev moduleName具体说明如下：
npm install X -g
- 安装模块到全局，不会在项目node_modules目录中保存模块包。
- 不会将模块依赖写入devDependencies或dependencies 节点。
- 运行 npm install 初始化项目时不会下载模块。
npm install X
- 会把X包安装到node_modules目录中
- 不会修改package.json
- 之后运行npm install命令时，不会自动安装X
npm install X --save
- 会把X包安装到node_modules目录中
- 会在package.json的dependencies属性下添加X
- 之后运行npm install命令时，会自动安装X到node_modules目录中
- 之后运行npm install --production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中,即是在线上环境运行时会将包安装
npm install X –save-dev
- 会把X包安装到node_modules目录中
- 会在package.json的devDependencies属性下添加X
- 之后运行npm install命令时，会自动安装X到node_modules目录中
- 之后运行npm install –production或者注明NODE_ENV变量值为production时，不会自动安装X到node_modules目录中
使用原则:
devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用–save-dev的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用–save的形式安装。
总结为一句话：运行时需要用到的包使用––save，否则使用––save-dev。
