后台信息管理页面模板-内容修改（开发前准备工作）

1、修改项目名称

解压vue-admin-template-master.zip，项目重命名：yygh-admin

2、修改package.json

"name": "yygh-admin",
"version": "3.8.0",
"license": "MIT",
"description": "医院预约挂号管理平台系统",
"author": "123456789@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、运行项目

#1、初始化，根据package.json下载项目依赖
npm insall

#2、 启动项目
npm run dev

6、登录页修改

将登陆相关请求接口改为静态数据，不请求接口

6.1、修改文件：\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，在此不用关注

6.1修改\src\util\request.js

config.headers['token'] = getToken()

7、页面零星修改

7.1、标题

index.html（项目的html入口）

7.2、 国际化设置

打开 src/main.js（项目的js入口），第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

7.3、 导航栏文字

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>

7.4、 面包屑文字

src/components（可以在很多项目中复用的通用组件）
src/components/Breadcrumb/index.vue

38行
meta: { title: '首页' }

7.5、 关闭校验

打开 config/index.js，配置是否开启语法检查

useEslint: false,

7.6、 复制icon图标

将vue-element-admin/src/icons/svg 中的图标复制到 guli-admin项目中

7、路由分析

7.1、 入口文件中调用路由

src/main.js
…
import router from ‘./router’//引入路由模块
…
new Vue({
el: ‘#app’,
router,
store,
render: h => h(App)
})

7.2、 路由模块中定义路由

src/router/index.js
…
export const constantRouterMap = [
…

{ path: ‘*’, redirect: ‘/404’, hidden: true }
]

export default new Router({
// mode: ‘history’, //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
说明：我们后续菜单路由就在此配置

8、修改后的前端项目模板下载

链接：https://pan.baidu.com/s/1yt__mAsjbx6_UQsRoVdaNg
提取码：63wq