vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板(最少精简版),可作为模板进行二次开发。
GitHub地址:https://github.com/PanJiaChen/vue-admin-template
建议:你可以在 vue-admin-template 的基础上进行二次开发,把 vue-element-admin当做工具箱,想要什么功能或者组件就去 vue-element-admin 那里复制过来。
# 解压压缩包 # 进入目录 cd vue-admin-template-master # 安装依赖 npm install # 启动。执行后,浏览器自动弹出并访问http://localhost:9528/ npm run dev
默认情况下,前端项目已经实现了登录功能,后端连接到远程Mock平台的模拟数据接口进行登录,而Mock平台地址无效,导致前端的登录功能无法执行
将登陆相关请求接口改为静态数据,不请求接口
修改文件:\src\store\modules\user.js
注释掉:Login、GetInfo、LogOut三个方法,替换为如下代码:
Login({ commit }) { const data = { 'token': 'admin' } setToken(data.token)// 将token存储在cookie中 commit('SET_TOKEN', data.token) }, GetInfo({ commit }) { const data = { 'roles': [ 'admin' ], 'name': 'admin', 'avatar': 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif' } if (data.roles &&data.roles.length >0) { // 验证返回的roles是否是一个非空数组 commit('SET_ROLES', data.roles) } commit('SET_NAME', data.name) commit('SET_AVATAR', data.avatar) }, // 登出 LogOut({ commit, state }) { return new Promise((resolve, reject) => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resolve() }) }
说明:token是我们手动配置的,如果过期后续自行生成,后续会有TokenHelper类生成token,在此不用关注
修改\src\util\request.js
config.headers['token'] = getToken()
index.html(项目的html入口)
<title>尚医通管理平台系统</title>
打开 src/main.js(项目的js入口),第7行,修改语言为 zh-CN,使用中文语言环境,例如:日期时间组件
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
src/views/layout/components(当前项目的布局组件)
src/views/layout/components/Navbar.vue
13行
<el-dropdown-item> 首页 </el-dropdown-item>
17行
<span style="display:block;" @click="logout">退出</span>
src/components(可以在很多项目中复用的通用组件)
src/components/Breadcrumb/index.vue
meta: { title: '首页' }
打开 config/index.js,配置是否开启语法检查
useEslint: false,
将vue-element-admin/src/icons/svg 中的图标复制到 guli-admin项目中
src/main.js
... import router from './router'//引入路由模块 ... new Vue({ el: '#app', router, store, render: h => h(App) })
src/router/index.js
... export const constantRouterMap = [ ... { path: '*', redirect: '/404', hidden: true } ] export default new Router({ // mode: 'history', //后端支持可开 scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap })
说明:我们后续菜单路由就在此配置