.vue文件的结构如下：
<template> <!‐‐编写页面静态部分，即view部分‐‐> 测试页面显示... </template> <script> /*编写model及vm部分。*/ </script> <style> /*编写页面样式，不是必须*/ </style>在页面的template中填写 “测试页面显示...”。
注意：template内容必须有一个根元素，否则vue会报错，这里我们在template标签内定义一个div。
3.1.1.2 页面路由在cms/router目录下创建index.js页面。
现在先配置路由，实现url访问到页面，再进行内容完善与调试。
1、在cms的router下配置路由
import Home from '@/module/home/page/home.vue'; import page_list from '@/module/cms/page/page_list.vue'; export default [{ path: 'http://www.likecs.com/', component: Home, name: 'CMS',//菜单名称 hidden: false, children:[ {path:'/cms/page/list',name:'页面列表',component: page_list,hidden:false} ] } ]2、在base目录下的router下添加导入cms模块的路由
// 导入路由规则 import CmsRouter from '@/module/cms/router' // 合并路由规则 concat(CmsRouter)3、测试
启动xc-ui-pc-sysmanage工程，刷新页面，页面可以外正常浏览，并且看到“测试页面显示...”字样
3.1.2 Table组件测试 3.1.2.1 Element-UI介绍本项目使用Element-UI来构建界面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
Element-UI官方站点：#/zh-CN/component/installation
3.1.2.2 Table组件测试本功能实现的页面列表，用户可以进行分页查询、输入查询条件查询，通过查看Element-UI库，我们需要Table 表 格、Form表单 及Pagination 分页组件。
进入Element-UI官方，找到Table组件，拷贝源代码到vue页面中，如下：
<template> <el-table :data="tableData"> <el-table-column prop="date" label="日期"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script>测试：
通过查看代码发现：
el-table组件绑定了tableData模型数据。 tableData模型数据在script标签中定义。 3.1.3页面内容完善根据需求完善页面内容，完善列表字段，添加分页组件与按钮组件。
<template> <div> <!-- 按钮--> <el-row> <el-button type="primary" v-on:click="query" size="small">查询</el-button> </el-row> <!-- Table表格--> <el-table :data="list" stripe> <el-table-column type="index"></el-table-column> <el-table-column prop="pageName" label="页面名称"> </el-table-column> <el-table-column prop="pageAliase" label="别名"> </el-table-column> <el-table-column prop="pageType" label="页面类型"> </el-table-column> <el-table-column prop="pageWebPath" label="访问路径"> </el-table-column> <el-table-column prop="pagePhysicalPath" label="物理路径"> </el-table-column> <el-table-column prop="pageCreateTime" label="创建时间"> </el-table-column> </el-table> <!-- 分页--> <el-pagination v-on:current-change="changePage" layout="prev, pager, next" :total="total" :current-page="this.params.page" :page-size="this.params.size"> </el-pagination> </div> </template> <script> export default { data() { return { list: [], total: 50, params: { page: 1, // 页码 size: 2 //每页显示个数 } } }, methods:{ //分页查询 changePage:function () { this.query(); }, //查询 query:function () { alert("查询") } } } </script> <style> /*编写页面样式，不是必须*/ </style>2、测试
在cms模块的api目录定义cms.js，
在cms.js中定义如下js方法，此方法实现http请求服务端页面查询接口。
//public是对axios的工具类封装，定义了http请求方法 import http from './../../../base/api/public' export const page_list = (page, size, params) => { return http.requestQuickGet('http://localhost:31001/cms/page/list/'+page+'http://www.likecs.com/'+size) }axios实现了http方法的封装，vue.js官方不再继续维护vue-resource,推荐使用 axios。
3.2.2 Api调用前端页面(page_list.vue)导入cms.js，调用js方法请求服务端页面查询接口。
import * as cmsApi from '../api/cms'