H5大咖分享：Vue如何搭建中后台框架？

发布时间：

2020-12-21
版权所有：

云和教育
分享：

后台框架搭建过程

1.1创建一个Vue项目

vue create 项目名

1.1.1选择合适的选项进行安装

· default· Manually select features

等待一段时间，项目创建完成

1.2.删除原有的demo

1.2.1src/views

· about.vue· home.vue

1.2.2 App.vue

删除对应的nav和style样式<div id=”nav”>

<router-link to=”/”>Home</router-link> |

<router-link to=”/about”>About</router-link>

</div>

1.2.3 src/router/index.js

引入home的代码，和相关的路由配置全部删除

1.2.4 src/components

删除HelloWord.vue基于以上操作后，项目才会变成空白项目

1.3 搭建环境

1.3.1 UI框架

· ElementUI· iview

· antDesign

具体的框架选择，可以选择该网站作为参考

拿iview做例子

1.3.1.1 @vue/cli3/4

vue add vue-cli-plugin-viewui直接运行，不需要在进行多余的配置

1.3.1.2 如果使用传统方式

安装iviewnpm i –save view-design

在main.js中引入iview

import ViewUI from ‘view-design’

import ‘view-design/dist/styles/iview.css’

Vue.use(ViewUI)

如果我们需要在一个css中对iview进行重置，则需要去创建一个css并且在main.js引入

在assets中创建css/reset.css，在main.js中引入（需要放在UI组件的css的下面）

import ‘./assets/css/reset.css’

1.3.2 axios

1.3.2.1 安装axios

npm i –save axios# 或者

yarn add axios

1.3.2.2 创建一个新的axios实例进行配置，并作为模块导出

在src下新建文件utils/server.jsserver.js

import axios from ‘axios’

// 调用axios的create方法创建一个新的axios

const instance = axios.create({

// 公共的请求前缀

baseURL: ‘https://some-domain.com/api/’,

// 请求超时时间

timeout: 1000,

// 设置默认的header信息

// headers: {‘a’: ‘1’}

})

// 创建axios的请求拦截器（一般设置的是401的问题）

instance.interceptors.request.use(config => {

// 在发送请求之前做些什么

// 一般配置config中的headers添加token

return config;

}, error => {

// 对请求错误做些什么

return Promise.reject(error);

});

instance.interceptors.response.use(response => {

// 对响应数据做点什么

return response;

}, error => {

// 对响应错误做点什么

return Promise.reject(error);

});

// 最后将实例导出，未来作为模块使用

export default instance

1.3.3.接口配置

我们应该对接口进行统一的管理· GET /books?page=1&limit=10 获取第一页的信息

· GET /books/:id 获取某本书的信息

· POST /books 新建一本书{title: “”,ISBN: “”,author: “”,price: “”}

· PUT /books/:id 更新书本全部内容{title: “”,ISBN: “”,author: “”,price: “”}

· PATCH /books/:id 更新书本部分内容{title: “”,ISBN: “”,author: “”,price: “”}

· DELETE /books/:id 删除某本书

· POST /login{username: ”,password: ”}

1.3.3.1. 创建文件夹api

在src下创建api文件夹，对应的统一模块的数据应该放在api下的模块.js中，模块中有相应模板src/api/books.js

// 引入axios的实例

import axios from ‘@/utils/server’

请求的函数最终返回的一定是一个Promise对象（axios.xxx()）

// 获取很多图书信息

/* {

page: 1,

limit: 10

} */

export const getBooks = params => axios.get(‘/books’, {params})

// 获取某一本书

export const getBook = id => axios.get(`/books/${id}`)

// 创建一本书

export const postBook = data => axios.post(‘/books’, data)

// 更新一本书

export const putBook = (id, data) => axios.put(`/books/${id}`, data)

export const patchBook = (id, data) => axios.patch(`/books/${id}`, data)

// 删除一本书

export const deleteBook = id => axios.delete(`/books/${id}`)

src/api/user.js

import axios from ‘@/utils/server’

export const login = data => axios.post(‘/login’, data)

1.3.4 路由配置

根据左侧导航菜单进行路由的配置

· Dashboard· 主控台

· 监控页

· 工作台

· 表单页面

· 基础表单

· 高级表单

· 列表页面

· 基础列表

· 用户列表

· 搜索页面

· 文章列表

· 项目列表

// 这里的相关path没有按要求写，只是个例子

const routes = [

{

path: ‘/Dashboard’,

component: Layout,

children: [

{

path: ‘主控台’,

}, {

path: ‘监控页’

}, {

path: ‘工作台’

}

]

}, {

path: ‘/表单页面’,

component: Layout,

children: [

{

path: ‘基础表单’

}, {

path: ‘高级表单’

}

]

}

]

src/router/Dashboard.js

import Layout from ‘Layout路径’

export default {

path: ‘/Dashboard’,

redirect: ‘/Dashboard/主控台’,

component: Layout,

children: [

{

path: ‘主控台’,

component: () => import(‘组件路径’)

}, {

path: ‘监控页’,

component: () => import(‘组件路径’)

}, {

path: ‘工作台’,

component: () => import(‘组件路径’)

}

]

}

src/router/表单页面.js

import Layout from ‘Layout路径’

export default {

path: ‘/表单页面’,

redirect: ‘/表单页面/基础表单’,

component: Layout,

children: [

{

path: ‘基础表单’,

component: () => import(‘组件路径’)

}, {

path: ‘高级表单’,

component: () => import(‘组件路径’)

}

]

}

这个时候我们就可以在router/index.js中引入对应的路由模块

import Dashboard from ‘Dashboard.js’

import 表单页面 from ‘表单页面.js’

const routes = [

Dashboard,

表单页面

]

如果我们还有新增的菜单，我们可以继续

1. 新建文件src/router/菜单.js

2. 在对应的文件中配置对应的路由

import Layout from ‘Layout路径’

export default {

path: ‘/一级菜单路径’,

redirect: ‘/一级菜单路径/二级菜单路径’

component: Layout,

children: [

{

path: ‘二级菜单路径’,

component: () => import(‘组件路径’)

}

]

}

3. 把这个对象在src/router/index.js中引入

import Dashboard from ‘Dashboard.js’

import 表单页面 from ‘表单页面.js’

import 菜单 from ‘菜单.js’

const routes = [

Dashboard,

表单页面,

菜单

]

1.3.4.1 添加路由后自动渲染菜单

该功能需要我们自己实现，在我们的菜单组件中，获取到对应的路由配置，根据路由配置的数组遍历得到菜单结构先在src/router/index.js导出routes

export const routes = [

//…

]

在对应的菜单组件中，引入对应的routes

在渲染时，我们发现，缺少必要的信息，例如

import Layout from ‘Layout路径’

export default {

path: ‘/一级菜单路径’,

component: Layout,

meta: {

title: “一级菜单”,

icon: “ios-xxx”

children: [

{

path: ‘二级菜单路径’,

component: () => import(‘组件路径’),

meta: {

title: “二级菜单”

}

{

path: ‘二级菜单路径（不需要渲染到菜单）’,

component: () => import(‘组件路径’),

meta: {

title: “二级菜单”,

hidden: true

}

]

}

{

“title”: “”,

“icon”: “”

}

这些自定义信息，我们可以添加到meta中

src/components/Sider.vue

<!– 根据顶级路由生成Submenu –>

</template>

<!– 根据children生成MenuItem –>

<MenuItem :key=”child.path” :name=”parent.path + ‘/’ + child.path” v-for=”child in parent.children” :to=”parent.path + ‘/’ + child.path”>{{child.meta.title}}</MenuItem>

</template>

</Submenu>

</template>

</Menu>

</template>

import {routes} from ‘@/router’

export default {

data () {

return {

routes

}

</script>

1.3.5 路由组件创建

src/views中存放我们的路由组件，原则上，一个模块应该分别在一个文件夹- views

– dashboard

– 总控台.vue

– 监控页.vue

– 工作台.vue

– 表单

– 普通表单.vue

– 高级表单.vue

如果是属于路由组件中的普通组件

– components

– 路由组件名（文件夹）

– 普通组件.vue

1.3.6 vuex

vuex最好使用modules，在配置时，添加对应模块在src/store/modules- modules

– dashboard.js

– 表单.js

在每个js中结构都是相同的

demo.js

export default {

namespaced: true,

state: {},

mutations: {},

actions: {}

getters: {},

modules: {}

}

再把模块js放置在src/store/index.js中

index.js

import 模块 from ‘模块路径’

const store = new Vuex.Store({

state: {},

mutations: {},

actions: {},

getters: {},

modules: {

模块

}

})

如果我们要用到请求，那么在对应模块中引入，并在action里调用

如果我们想要在vuex中使用Message、router等相关的对象

直接引入即可

import {Message} from ‘view-design’

import router from ‘@/router’

在vue中有一些东西是一样

this.$store === new Vue.Store()

this.$router === new VueRouter()

文/云和数据高级H5开发工程师

上一篇教程 | Vue移动端项目如何打包成APP?
下一篇一周教育行业大事件回顾（12.14-12.20）

H5大咖分享：Vue如何搭建中后台框架？

最新开班信息

课程咨询

云和热门培训课程

推荐阅读