使用VUE作为前端框架的环境搭建

1 安装node.js

nodejs的安装方式非常简单，在官网下载msi格式的安装包，傻瓜式安装，自动全局配置

C:\Users\Administrator>node -v
v10.12.0

在cmd窗口用node -v即可查看版本号

2 切换淘宝cnpm

nodejs带的资源安装方式是npm，但是连国外的网，这里将其切换成国内的私服，淘宝的cnpm是很好的选择

npm install -g cnpm --registry=https://registry.npm.taobao.org

C:\Users\Administrator>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.0.0
updated 4 packages in 11.126s

之后只要用cnpm载入资源就行了

3 全局安装vue

cnpm install -g vue

Downloading vue to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue_tmp\_vue@2.5.17@vue to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue
Installing vue's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue/node_modules
All packages installed (used 5ms(network 2ms), speed 0B/s, json 0(0B), tarball 0B)

再安装 vue-cli
cnpm install -g vue-cli

vue的全局安装完毕 十分简单 使用vue -V（大写V）查看vue版本

C:\Users\Administrator>vue -V
2.9.6

4 使用webpack方式搭建项目脚手架

创建一个文件夹存储项目包，进入文件夹，在文件夹中启动cmd窗口输入
vue init webpack myproject（myproject自定义项目名）
等待资源下载好之后有几个选项需要输入，项目名、描述、作者，这些自由选择输入。
之后需要做一些选择

? Install vue-router? (Y/n)  选Y 开启vue路由。
? Use ESLint to lint your code? (Y/n) 选Y 开启代码规范检查，有助于初学者掌握编写规范。

剩下的选项建议选n 不需要，也不多做介绍

接下来要下载项目启动的资源包，类似于java maven依赖下载，在当前cmd窗口下进入我们刚下载下来的项目包，输入
cnpm install
资源下载好之后会在在项目包中出现一个node_modules资源包，如果这个过程出现报错，直接删除node_modules并重新下载资源

这样我们的vue项目就可以启动了！
cnpm start 启动项目

直接访问 http://localhost:8080.