spring boot 整合vue,支持 element-ui
spring boot 整合vue,支持 element-ui , 开发工具: IDEA
前端早已经不是之前人们口中的“抠图仔”，只是写写简单的HTML，CSS和脚本动画。前端技术在最近十年的时间里飞速发展，一方面是移动互联网的兴起，带动移动端浏览器用户需求的飞速增加，另一方面是Angular,React,Vue等框架和Node.js，ES6等新技术的出现和发展，带动了前端技术的飞速提升。那么我们怎么整合呢？
现在开始:
前提需安装Node.js,并配置好环境变量,不会配置的同学可自己百度!!!
然后在IDEA中的自带Terminal里,运行脚本以验证是否安装成功:
IDEA终端Terminal打开方法:在IDEA中点击view→tool window→Terminal即可开启,或按住ALT+F12（如果是笔记本按不出来的话再加个Fn键）
我们在Terminal中.分别输入 node -v 和 npm -v , 如果出现了相应的版本号,那么恭喜你安装成功,如果过没成功,请自行百度,查找原因!!!
Terminal
1. 在Terminal中输入 : npm install -g cnpm --registry=https://registry.npm.taobao.org, 然后回车键,安装淘宝镜像
2. 在Terminal中输入 :cnpm install -g webpack 然后回车键,稍等片刻,安装会运行一段时间
3. 在Terminal中输入 :cnpm install -g vue-cli 然后回车键,安装VUE脚手架 同样会下载安装一会,别急
4. 在Terminal中输入 : vue init webpack + 项目名 因为我已经在项目目录中了,我就直接输入的vue init webpack,回车然后出现如下图,按照我的操作即可:
有的你就回车确认,有的你就选择yes或者no
vue init webpack
5. 在Terminal中输入 : cnpm install 回车键, 安装依赖
6. 在Terminal中输入 : npm run dev 回车键,启动项目
成功
这时，打开浏览器，访问http://localhost:8080,出现vue的大V即成功了!!!
成功页面
①. 我们的App.vue就是我们默认的主页面,HelloWorld.vue是在主页面中显示的内容,首页内容的仪表盘
②. 在router下面的index.js是我们路由.作用是配置你添加的页面,和页面跳转的URL的.
③. 在config下面的Index.js是我们的配置文件,可以配置我们和后台交互,可以更改vue的启动端口号:
7.安装Element-ui
Element-ui官方文档: Element
安装方式: 在Terminal中输入 : npm i element-ui -S 回车等待安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
** 安装好之后,我们需要在main.js里引入Element
import ElementUIfrom 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
注意: 如果不引入,你就无法在vue页面里使用Element组件,index.css是样式.
# 另外一种方式是: CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响
8. 在Terminal中按CTRL + C 即可关闭vue
另外需要注意的是: 如果你安装或者是运行出现了问题,请仔细看看你运行Terminal命令的时候是在哪个目录下的,是不是目录错了.
我们是需要在package.json所在的目录下输入命令的,这点请注意.
