spring+vue环境搭建（四）上
回顾：前面我们搭建好了springmvc，mybatis后端环境，以及vue，webpack前端环境。这部分，我们的目标是引入vue常用的一些特性，如element-ui和router，然后进行前后端联调
第四步（上）
首先，我们理一哈vue-cli生成了哪些文件，先看webpack.config.js
可见，js入口文件为src/main.js，然后webpack给我们打包到dist/build.js
src/main.js文件内容如下，为vue入口
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})然后，vue-cli给我们生成的第一个vue文件App.vue，内容如下（省略掉style代码）
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}h1>
<h2>Essential Linksh2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docsa>li>
<li><a href="https://forum.vuejs.org" target="_blank">Foruma>li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chata>li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twittera>li>
ul>
<h2>Ecosystemh2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-routera>li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuexa>li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loadera>li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vuea>li>
ul>
div>
template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
script>而首页面为index.html，这里引用dist/build.js
<html lang="en">
<head>
<meta charset="utf-8">
<title>wantdoctitle>
head>
<body>
<div id="app">div>
<script src="/dist/build.js">script>
body>
html>由此，可以得出一个文件依赖关系
OK，理清文件扮演的角色，我们可以知道改修改什么地方了。可以在src/main.js中引入组件，自定义界面则从App.vue修改起
这里，我们打算引入2个组件：element-ui，vue-router
先引入element-ui
首先先安装element-ui包
sudo cnpm install element-ui安装无误后，修改src/main.js，添加组件
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
})npm run dev运行后，会发现报错
./node_modules/_element-ui@2.2.2@element-ui/lib/theme-chalk/fonts/element-icons.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/_css-loader@0.28.11@css-loader!./node_modules/_element-ui@2.2.2@element-ui/lib/theme-chalk/index.css 7:327-363
@ ./node_modules/_element-ui@2.2.2@element-ui/lib/theme-chalk/index.css
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@2.11.2@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js这是由于element-ui包含一些特殊格式文件，需要修改webpack.config.js配置添加对这些文件的支持
OK，再运行一遍会发现没有报错了
然后，写个测试用例，就在App.vue加一个element-ui组件
<template>
<div id="app">
...
<el-button type="primary">饿了吗测试el-button>
div>
template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
script>运行如下
OK，引入element-ui组件成功
然后，我们引入vue-router组件，并实现1个简单路由
同样的，先安装vue-router组件，并在src/main.js中添加组件
sudo cnpm install vue-routerimport Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Router from 'vue-router'
import 'font-awesome/css/font-awesome.min.css'
Vue.use(ElementUI);
Vue.use(Router);
new Vue({
el: '#app',
render: h => h(App)
})先在App.vue加入router-view
<template>
<div id="app">
<router-view>router-view>
div>
template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
script>新建路由策略文件router.js，内容如下
import Vue from 'vue'
import VueRouter from 'vue-router'
import main from './main/webapp/WEB-INF/pages/main.vue'
import page1 from './main/webapp/WEB-INF/pages/page1.vue'
import page2 from './main/webapp/WEB-INF/pages/page2.vue'
import page3 from './main/webapp/WEB-INF/pages/page3.vue'
Vue.use(VueRouter);
let routes = [
{
path: '/',
component: main,
name: '',
},
{
path: '/page1',
component: page1,
name: '',
},
{
path: '/page2',
component: page2,
name: '',
},
{
path: '/page3',
component: page3,
name: '',
},
];
let router = new VueRouter({routes});
export default router按路由策略，新建对应路由的文件，文件内容简单打印个标示就行了，例main.vue
<template>
<div>
<span>defaultspan>
div>
template>
<script>
export default{}
script>修改src/main.js，引入路由
import ...
import router from './router.js'
...
new Vue({
el: '#app',
router,
render: h => h(App)
});这里，读者可能对我们之前的操作有疑惑，建议复习哈vue-router相关知识
运行测试，测试“／“路径
测试“/page1“路径
OK，路由组件测试完毕。路径中“/#/“为vue路由特殊添加的字符
上面我们引入了2个组件，这是vue中比较常用的功能。下面我们进入本章节最关键的部分：前后端联调
联调什么意思呢，即通过前端调用后端接口，实现了这一点才算比较完整的开发环境。
因为联调涉及的内容较多，和前面2个组件的引入内容放一起，怕引起读者的阅读疲劳，于是我们把联调内容单独抽出作为本章节（下卷）介绍