# vue-admin-template

**Repository Path**: quick_dev/vue-admin-template

## Basic Information

- **Project Name**: vue-admin-template
- **Description**: 前端模板
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 0
- **Created**: 2020-03-18
- **Last Updated**: 2021-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 帮助文档

## 发布

```bash
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod
```

## 去除mock数据,替换真实接口
1.打开vue.config.js
```js
//修改标题
const name = defaultSettings.title || '开源充电宝' // page title
//修改端口
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
//修改接口
proxy: {
      '/api': {
        target: `http://127.0.0.1:9527`,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  // before: require('./mock/mock-server.js')
```
2.打开src/main.js
```js
//注释以下内容
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}
```
3.打开.env.development
```js
//将:
VUE_APP_BASE_API = '/dev-api'
//修改为:
VUE_APP_BASE_API = 'http://127.0.0.1:9527'
```
4.打开src/api/user.js
```js
//将:
 url: '/vue-admin-template/user/login'
//改为:
 url: '/api/user/login'
```
5.打开src/utils/request.js
```js
//注释掉第8行
//baseURL: process.env.VUE_APP_BASE_API,
```
6.打开src/views/login/index.vue
```vue
修改用户名密码
```
7.打开src/store/modules/user.js
```js
login({ mobile: username.trim(), password: password }).then(response => {
//此处的mobile 是username改的,因为后端的参数是mobile
const { data } = response
        commit('SET_TOKEN', data.token)//去掉.token,和后端对应
        setToken(data.token)//去掉.token,和后端对应
        resolve()
},

//修改token标识,和后端对应
config.headers['Authorization'] = getToken()

//去除登出操作的后端接口访问
//去除后,变成纯前端的退出登录
  //  user/logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {

      // logout(state.token).then(() => {

      removeToken() // 去除token
      resetRouter()
      commit('RESET_STATE')
      resolve()

      /*      }
      ).catch(error => {
        reject(error)
      })*/

    })
  }

```
8.点击头像操作
```vue
  在src/layout/components/Navbar.vue中控制
```
9.导航栏中文名字
```vue
在src/router/index.js中
看见 meta: { title: '首页', icon: 'dashboard' }
把title对应的改为中文即可
```
```vue
// src/components/Breadcrumb/index.vue  第40行 Dashboard改为首页
if (!this.isDashboard(first)) {
        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
      }
```
10.更改浏览器图标
```vue
//在src/layout/components/Sidebar/Logo.vue中
    return {
      title: '开源充电宝',
      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
    }
```
11.后端传的roles需要是一个数组
```vue
在src/views/profile/index.vue下方
使用roles.join('|')  来获取角色

在src/views/profile/components/UserCard.vue 中
使用 {{ user.roles | uppercaseFirst }} 让首字母大写
```
12.info返回数据
```json
 {
  "success":true,
  "code":20000,
  "message":"操作成功！",
  "data":
    {
    "id":"1240815627057258496",
    "login_time":1584670385,
    "roles":["admin","editor"],
    "name":"房似锦",
    "mobile":"13800000002",
    "avatar":"https://s2.ax1x.com/2019/07/17/ZLWJSA.gif",
    "introduction":"普通员工",
    "exp_time":1584673985
    }
}
```
13.使用路由动态分配菜单
```js
//1.首先找到 src/store/modules/permission.js
//--文件中generateRoutes方法指明: admin角色展示所有的菜单
//--所以不能使用admin角色测试,或者在这里修改方法
//2.找到 src/views/dashboard/index.vue
//--created()里面的内容控制登录后不同角色进入的首页 
//3.找到路由 src/router/index.js
//--开始配置菜单
//--示例:
{
    path: '/form',
    component: Layout,
    redirect: '/form/index',
    alwaysShow: true, // 显示根菜单
    name: 'Form',
    meta: {
      title: '表单',
      icon: 'lock',
      roles: ['employee'] // 分配角色
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/form/index'),
        hidden: false, // 是否在菜单里隐藏
        name: 'PagePermission',
        meta: {
          title: '提交页面',
          roles: ['employee'] 
        }
      }
    ]
  }
//4.换账号登录试试
```
14.封装、引用全局过滤器
```js
第一步:
在src/filters/index.js中定义好过滤器
第二步:
在src/main.js中import并注册
//导入全局过滤器
import * as filters from './filters'
// 注册全局过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
第三步:
使用:
//使用uppercaseFirst过滤器,将首字母大写
<div>{{ user.roles | uppercaseFirst }}</div>
```