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' 然後，vue-cli給我們生成的第一個vue檔案App.vue，內容如下（省略掉style程式碼）
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target 而首頁面為index.html，這裡引用dist/build.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wantdoc</title>
</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>default</span>
</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個元件的引入內容放一起，怕引起讀者的閱讀疲勞，於是我們把聯調內容單獨抽出作為本章節（下卷）介紹