vue-element-admin中遇到的问题

vue-element-admin

介绍

是一个后台前端解决方案，基于 vue 和 element-ui实现

准备

需要在本地安装 node 和 git

目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

安装

安装基础模板

https://github.com/PanJiaChen/vue-admin-template.git

再使用 npm install 安装依赖

解决页面刷新vuex值消失

安装vuex-persistedstate

npm install vuex-persistedstate

在store目录下index引入

import createPersistedState from 'vuex-persistedstate'

配置vuex-persistedstate

const PERSIST_PATHS = ['user']
const store = new Vuex.Store({
  state: {},
  modules: {
    app,
    settings,
    user,
    permission,
    tagsView
  },
  getters,
  plugins: [createPersistedState({
    storage: window.sessionStorage,
    paths: PERSIST_PATHS
  })]
})

或者在app.vue加入如下代码

export default {
name: 'App',
created () {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}

//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
}

过滤器解决时间格式的处理

<el-table-column label="入职时间" sortable prop="timeOfEntry">
<template slot-scope="obj">
{{
obj.row.timeOfEntry | 过滤器
}}
</template>
</el-table-column>

安装 moment

npm i moment

编写过滤器函数

import moment from 'moment'
export function formatTime(value) {
return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
}

在 main.js 中全局注册过滤器

import * as filters from '@/filters'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})

导入组件

安装 xlsx 插件

npm i xlsx

注册全局的导入excel组件

import CommonTools from './CommonTools'
import UploadExcel from './UploadExcel'
export default {
install(Vue) {
Vue.component('CommonTools', CommonTools) // 注册工具栏组件
Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件
}
}

导出组件

安装如下命令

npm install xlsx file-saver -S
npm install script-loader -S -D

图片地址生成二维码

安装生成二维码的插件

npm i qrcode

qrcode的用法是

QrCode.toCanvas(dom, info)

将canvas标签放到dialog的弹层中

<el-dialog title="二维码" :visible.sync="showCodeDialog" @opened="showQrCode"
@close="imgUrl=''">
<el-row type="flex" justify="center">
<canvas ref="myCanvas" />
</el-row>
</el-dialog>

点击用户显示弹层并将图片地址转化成二维码

showQrCode(url) {
if (url) {
this.showCodeDialog = true 
this.$nextTick(() => {
QrCode.toCanvas(this.$refs.myCanvas, url) 
})
} else {
this.$message.warning('该用户还未上传头像')
}
}