1. Vue脚手架搭建以及创建vue项目
1.1 安装Node.js
Vue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js
只以windows系统版本为例，其他操作系统请自行下载安装。
Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/
1）Node.js安装过程（傻瓜式安装）：一路Next下去，安装过程自动配置了环境变量,选择添加到path,这样就自动配置环境变量了
2）验证是否安装成功：cmd中输入：node --version,出现如下图即表明安装成功
3）npm(node package manager)是node的包管理工具，我们在后面主要是使用npm来搭建脚手架和安装一些常用的组件。
由于现在版本的nodejs已经集成npm所以无需安装，node.js成功安装之后，npm一并安装成功，这个时候我们可以打开cmd窗口，输入 node --version 和 npm --version 来查看node.js和npm的版本，如果能够显示出版本，说明已经安装成功。
4）安装cnpm
大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像
其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，因为使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以使用cnpm稳一点。
注意：如果你发现你安装成功了，使用cnpm却发现找不到命令，就是你的环境变量有问题，在环境变量里面的path添加你node的安装路径就行，比如我的是 D:\NodeJS\nodejs-sortware\
# 1.安装阿里云镜像
npm install cnpm -g --registry=https://registry.npm.taobao.org
# 2.配置后验证是否成功
cnpm -v
1.2 安装VUE脚手架vue-cli
1）全局安装 vue-cli ，在命令提示窗口执行 ：
- cnpm install vue-cli -g
2) 安装成功后使用 vue --version 即可验证是否够安装成功
1.3 创建VUE项目
1）选定路径，创建vue项目，这里我是在桌面上新建了my-project文件夹，在命令行中进入文件夹
用 cd /d C:\Users\Administrator\Desktop\my-project 这个命令可以直接进去到my-project文件夹
2）初始化vue脚手架项目
- vue init webpack learn-vue 解释：`learn-vue是项目名`
按照图片步骤：
Project name：项目名称，默认 回车 即可
Project description：项目描述，默认 回车 即可
Author：项目作者，默认 回车 即可
Install vue-router：是否安装 vue-router ,选择yes安装
Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添
加）
Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）
Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）
Should we run npm install for you after the project has been created：创建完成后直接初 始化，选择 n，我们手动执行;运行结果!
如果路由没有安装后期也可用命令行:
Vue-router 的安装
- cnpm install vue-router --save-dev
3） 完成以上即会在指定的目录下生成vue的文件目录如下：
4） 生成文件目录后，使用 cnpm 安装依赖，命令如下：
注意：要进去到learn-vue文件夹 用 cd learn-vue
- cnpm install
5) 运行
- npm run dev 或 npm start
6）打开浏览器访问：http://localhost:8080
效果：
1.4 安装Eliemnt UI
# 1.安装命令
cnpm i element-ui -S
# 2.配置main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
1.5 安装SASS加载器
# 1.安装命令
cnpm install sass-loader node-sass --save-dev
# 2.配置在App.vue 中引入
<style lang="less">
</style>
1.6 安装axios
# 1.输入命令
cnpm install --save axios
# 2.配置main.js中引入axios
import axios from 'axios';
Vue.prototype.$http=axios;
//vue中内置了http方式异步请求，但是这种方式没有axios好用，所有我们要替换掉它为axio
# 3.使用axios
在需要发送异步请求的位置:
this.$http.get("url").then((res)=>{})
this.$http.post("url").then((res)=>{})
2. 打包部署
1) 使用命令
- npm run build
2) 在dist目录中生成文件， 拿到后端项目放到static 目录
如果在springboot中配置了前缀/vue，那么vue的访问路径都要加上前缀，还有在打包之后的index.html的引入 资源 的路径中也要加上/vue/，否则访问不到
启动springboot 访问 http://localhost:8989/vue/dist/index.html
注意：vue的model中不可以是 history
3.步骤流程
# 1.添加组件components目录下新建 Login.vue
# 2.index.js添加路由
1）引入组件---->import Login from "../components/Login"
2）使用路由---->Vue.use(Router)配置路由routes(path和component)）
3)配置路由----> routes: [{path: '/',redirect:'/Login'}]
# 3.main.js(入口)
1)引用路由---->import router from './router'
2)引入ElementUI(参考官网有两个import)
---->import ElementUI from 'element-ui'
---->import 'element-ui/lib/theme-chalk/index.css'
---->使用Vue.use(ElementUI);
3）引用axios
---->Vue.prototype.$http = axios
---->Vue.config.productionTip = false
# 4.App.vue中配置router视图
----><router-view/>
4.其他命令
- npm uninstall less-loader 卸载
- 执行 npm cache clean 或者 cnpm cache clean 命令清除掉cache缓存