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 Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

而首页面为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-router
import 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个组件的引入内容放一起,怕引起读者的阅读疲劳,于是我们把联调内容单独抽出作为本章节(下卷)介绍

展开阅读全文

没有更多推荐了,返回首页