一 环境搭建
1.解压vue-admin-template-master.zip
链接:https://pan.baidu.com/s/1nM2O7MvZeGoNbXbXaUcCGA
提取码:3pw7
2、修改package.json
{
“name”: “yygh-admin”,
“version”: “3.8.0”,
“license”: “MIT”,
“description”: “管理平台系统”,
“author”: “12341234123@qq.com”,
…
}
3.如果需要修改端口号
config/index.js中修改
port: 9528
4.项目目录结构
├── build // 构建脚本
├── config // 全局配置
├── node_modules // 项目依赖模块
├── src //项目源代码
├── static // 静态资源
└── package.jspon // 项目信息和依赖配置
src
├── api // 各种接口
├── assets // 图片等资源
├── components // 各种公共组件,非公共组件在各自view下维护
├── icons //svg icon
├── router // 路由表
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具,非公共工具,在各自view下维护
├── views // 各种layout
├── App.vue //项目顶层组件
├── main.js //项目入口文件
└── permission.js //认证入口
5.运行项目
npm insall
npm run dev
6.登录页修改
将登陆相关请求接口改为静态数据,不请求接口
修改文件:\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()
})
}
修改\src\util\request.js
7.其他修改
标题:
index.html(项目的html入口)
国际化设置
打开 src/main.js(项目的js入口),第7行,修改语言为 zh-CN,使用中文语言环境,例如&#