如未安装Node.js请查看上一篇文章Node.js的安装与配置
一.安装Vue
1. 安装vue.js
npm install vue -g
其中-g是全局安装，指安装到global全局目录去，如果不加-g，模块就会安装到当前路径下的node_modules文件夹下，没有目录则自动创建。
2. 安装webpack模板
npm install webpack -g
此外，在webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli.
npm install webpack-cli -g
3. 安装脚手架vue-cli
npm install vue-cli -g
vue --version用vue --version检查，能输出版本号就说明安装好了
4. 安装vue-router
npm install vue-router -g
二.第一个vue-cli应用程序
1.创建项目
注：最好cd到D盘、E盘的某个位置，即项目的路径，否则项目会新建在C:\Users\用户名\，也可以直接在想要的项目路径下输入cmd；若出现权限问题，采用管理员运行cmd窗口。
2.创建一个基于webpack模板的vue应用程序
vue init webpack 项目名
如若出现上述问题有以下两种解决 方法：（只介绍一种，因为另一种我使用无效）
方法1.是网上比较普遍的方法（推荐）
由于仓库总是安装在d盘，而非c盘，全局下使用webpack命令构建项目总会去c盘找template，而那里实际是空的，所以最后只能采用网上比较普遍的一个办法，将webpack文件夹放在c盘目录下
应该是下载某个package的时候，需要翻墙，导致出现连接超时。超时错误截图如下：解决办法是改为离线创建，我们需要下载github仓库中的vue-templates/webpack，然后解压到本地。下载地址为：https://github.com/vuejs-templates/webpack，（如果进不去我个人推荐steam++加速）下载之后，解压到本地用户目录下的.vue-templates目录下。下载之后的压缩包为webpack-develop.zip，我们解压之后，需要更改目录名为webpack。用户目录下的目录为.vue-templates，注意文件夹名称前面的点(.)。
我们再进行vue init webpack xxx（项目名）命令的时候，需要带上参数--offline表示离线初始化。
vue init webpack 项目名 --offline
根据自己的需求来操作。
- 项目名是？回车
- 项目描述？回车
- 作者？回车
- 是否安装编译器 回车
- 是否安装vue-router 回车
- 是否使用ESLint做代码检查 回车
- 是否安装单元测试工具 回车
- 单元测试相关 回车
- 创建完成后直接初始化 回车
如果没有自动初始化，我们按照代码提示手动初始化
cd myvue
npm run dev
附：如运行前端项目时，打开前端项目目录，在目录行输入cmd，在本地调试命令行执行npm run dev，放到服务器上的话用npm run build，随后执行npm run serve 开始运行项目的前端部分，后端在idea等单独运行。