• 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资
联系客服
微信公众号
官方微博
0371-67988003

H5大咖分享:使用Vue搭建中后台框架流程

来源:云和教育 时间:2020-08-31 阅读:27

后台框架搭建过程

1.1 创建一个Vue项目

vue create 项目名

1.1.1

选择合适的选项进行安装

· default

· Manually select features

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

1.2 删除原有的demo

1.2.1 src/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 如果使用传统方式

安装iview

npm 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.js

server.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

<template>

<Menu :theme=”theme2″ :active-name=”$route.path”>

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

<template v-for=”parent in routes”>

<Submenu :name=”parent.path” :key=”parent.path” v-if=”!parent.meta.hidden”>

<template slot=”title”>

<Icon :type=”parent.meta.icon” />

{{parent.meta.title}}

</template>

<!– 根据children生成MenuItem –>

<template>

<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>

<script>

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开发工程师