前段时间使用vue-element-admin做了一个简单的读书管理后台，现整理遇到的各类问题。
使用 vue-element-admin 初始化项目，而不是vue-admin-template
原因在于:vue-element-admin 实现了登录模块，包括 token 校验、网络请求等
-
下载
从github上clone项目时，防火墙禁止对git://的访问，
可用https://来访问repository。
git config --global url."https://".insteadOf git://
-
项目结构
api：接口请求
assets：静态资源
components：通用组件
directive：自定义指令
filters：自定义过滤器
icons：图标组件
layout：布局组件
router：路由配置
store：状态管理
styles：自定义样式
utils：通用工具方法
auth.js：token 存取
permission.js：权限检查
request.js：axios 请求封装
index.js：工具方法
views：页面
permission.js：登录认证和路由跳转
settings.js：全局配置
main.js：全局入口文件
App.vue：全局入口组件
-
调试
为方便进行源码调试，可将 vue.config.js 中的 cheap-source-map 改为 source-map
这样调试时可看见源码，而不是编译后的代码。
souce-map缺点：每次改动文件，会同步生成新的map文件，导致构建速度变慢。
故开发时，保持 eval 配置以增加构建速度，config.devtool('eval') ，
需要源码调试排查问题时，改为 source-map
config
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)
-
一些代码
1. 路由相关
vue-element-admin 将路由分成两种：
constantRoutes 固定路由
asyncRoutes 根据用户角色判定添加
export const asyncRoutes = [
{
path: '/book',
component: Layout,
redirect: '/book/create',
//redirect 重定向，当访问 /book 时， 会被重定向到 /book/create
children: [
{
path: '/book/create',
component: () => import('@/views/book/create'),
name: 'book',
meta: { title: '添加图书', icon: 'edit', roles: ['admin'] }
//使用 admin 登录，才可以看到"添加图书"功能
}
]
},
// ...
]
重定向：
未获取 Token时，访问 /login 以外且不在白名单的路由，如：
访问 /dashboard，实际访问路径为 /login?redirect=%2Fdashboard，登录后会直接重定向 /dashboard
重定向时，参数获取：
const query = {
redirect: '/book/list',
name: 'yuki',
id: '1234'
}
const _query = Object.keys(query).reduce((acc, cur) => {
if (cur !== 'redirect') {
acc[cur] = query[cur]
}
return acc
}, {})
console.log(query, _query)
2. 登录相关
user/login 方法调用了 login API，传入 username 和 password 参数，请求成功后会从 response 中获取 token，然后将 token 保存到 Cookie 中，之后返回。
如果请求失败，将调用 reject 方法，交由我们自定义的 request 模块来处理异常
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.token)
setToken(data.token)
resolve()
}).catch(error => {
reject(error)
})
})
}
3. 图书列表相关
<!--使用v-slot-->
<el-table-column
label="书名"
align="center"
width="150"
>
<template v-slot="{ row: { title } }">
<!--解构赋值，拿出 row 里面的 title，一个row就是一条数据（数组的一项）-->
<span>{{ title }}</span>
</template>
</el-table-column>
<!--使用prop-->
<el-table-column
label="书名"
prop="title"
align="center"
width="150"
/>
关键字高亮：
wrapperKeyword(key, value) {
function highlight(value) {
return `<span style="color: #1890ff">${value}</span>`
}
if (!this.listQuery[key]) { // 判断查询参数是否存在 title author
return value
} else {
return value.replace(new RegExp(this.listQuery[key], 'ig'), value => highlight(value))
}
},
同一路由，查询参数不同：
beforeRouteUpdate(to, from, next) {
if (to.path === from.path) { // 跳转到同一个路由
const newQuery = {...to.query}
const oldQuery = {...from.query}
if (JSON.stringify(newQuery) !== JSON.stringify(oldQuery)) { // 如果查询参数不同
this.getList() // 重新发送请求获取列表
}
}
next() // 调用next(),否则一直显示加载中状态
}
4.接口相关
vue-element-admin使用了mock接口，我改用自己开发的接口，关闭mock
修改 .env.development 和 .env.production 两个配置文件：
VUE_APP_BASE_API = '/dev-api' 修改为实际接口地址
网友评论