使用element-ui开发一个后台管理系统

一、项目的实现流程

• 1.使用vue创建项目并安装element-ui
• 2.实现登录页面
• 3.实现home中各个组件的开发
• 4.项目优化

二、用到的知识点

2.1.登录逻辑

• 1.初次进入页面，先登录
• 2.如果登录成功，就保存token信息，然后跳转到home页面
• 3.如果有token信息，进入页面就直接进入到home页面
• 4.如果没有token信息，进入页面就进入login页面

三、使用到element-ui中的组件

3.1.安装

使用全局安装的方法

vue add element-ui
复制代码

3.2.使用

安装完之后在src路径下会有一个plugins的文件夹，只需要在main.js中引用即可

import './plugins/element.js'
复制代码

3.3.form表单

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
  <el-form-item label="表单名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
复制代码

属性：

el-form

• model 表单绑定的数据
• rules 表单规则验证
• ref 父组件可以通过this.$refs来访问该组件

el-form-item

• label 表单对应的名称
• prop 表单绑定的规则

3.4.input输入框 button按钮

  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
复制代码

• v-model 需要绑定的数据

3.5.面包屑导航

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
复制代码

3.6.卡片

<el-card class="box-card">
  <div>卡片内容</div>
</el-card>
复制代码

3.7.table

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
复制代码

table表格里面可以有很多的属性
el-table中的属性

• data 显示的数据
• border 是否带有纵向边框
• stripe 是否为斑马纹 table

el-table-column中的属性

• type 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮
• index 如果设置了 type=index，可以通过传递 index 属性来自定义索引
• label 显示的标题
• prop 对应列内容的字段名，也可以使用 property 属性
• width 对应列的宽度
• formatter 用来格式化内容
• align 对齐方式

3.8.分页器

<span class="demonstration">完整功能</span>
<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
    :page-sizes="[100, 200, 300, 400]"
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400">
</el-pagination>
复制代码

属性

• current-page 当前页数
• page-sizes 每页显示个数选择器的选项设置
• page-count 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性
• page-size 每页显示条目个数
• layout 组件布局，子组件名用逗号分隔
• total 总条目数

方法

• size-change pageSize 改变时会触发(改变每页的数量的时候调用)
• current-change currentPage 改变时会触发(改变页码的时候调用)

3.9.Cascader 级联选择器

  <span class="demonstration">hover 触发子菜单</span>
  <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"></el-cascader>
复制代码

属性

• options 展示的数据
• props 配置选项(如下)

• value 指定选项的值为选项对象的某个属性值
• label 指定选项标签为选项对象的某个属性值
• children 指定选项的子选项为选项对象的某个属性值
• expandTrigger 次级菜单的展开方式

方法

• change 当选中节点变化时触发

3.9.Switch 开关

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
复制代码

属性

• active-color switch 打开时的背景色
• inactive-color switch 关闭时的背景色

3.10.Upload上传

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  :headers="headerObj"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
复制代码

属性

• action 图片上传的服务器地址
• headers 设置上传的请求头部(因为upload有自己的上传方法，所以我们设置的的axios请求就不起作用了，所以需要该属性来设置请求头)
• list-type 文件列表的类型

方法

• on-preview 预览文件的时候调用
• on-remove 文件列表移除文件时调用
• on-success 文件上传成功时调用

3.11.Tag 标签

<el-tag type="success" closable>标签一</el-tag>
复制代码

有多种类型 1.success 2.info 3.warning 4.danger\

属性

• closable 可移除标签

方法

• click 点击 Tag 时触发的事件
• close 关闭 Tag 时触发的事件

3.12.Message 消息提示

this.$message.success()
复制代码

有多种状态：warning warning

3.13.NavMenu 导航菜单

<el-col :span="12">
    <h5>自定义颜色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
复制代码

3.14.Tabs 标签页

 <el-tabs :tab-position="'left'" style="height: 200px;" :before-leave="" tab-click="">
    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
  </el-tabs>
复制代码

属性

• tab-position 选项卡所在位置(top/right/bottom/left)

方法

• before-leave 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。

3.15.Steps 步骤条

<el-steps :space="200" :active="1" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>
复制代码

属性方法

• space 每个 step 的间距，不填写将自适应间距。支持百分比。
• active 设置当前激活步骤
• finish-status 设置结束步骤的状态

四、项目优化

4.1.增加进度条(nprogress)

npm install nprogress -S
复制代码

在axios的请求拦截和响应拦截中设置开启和关闭

// 请求拦截
axios.interceptors.request.use(config => {
  // 显示进度条
  NProgress.start()
  return config
})
// 响应拦截
axios1.interceptors.response.use(config => {
  // 隐藏进度条
  NProgress.done()
  return config
})
复制代码

4.2.打包阶段去掉console.log()

npm install transform-remove-console -D
复制代码

4.3.完成打包多入口，将开发阶段和发布阶段的打包入口分开

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}
复制代码

4.4.加载CDN

先在vue.config.js中配置

config.set('externals', {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    axios: 'axios',
    echarts: 'echarts',
    nprogress: 'NProgress',
    lodash: "_",
    'vue-quill-editor': 'VueQuillEditor'
})
复制代码

然后在index.html页面中添加CDN

4.5.开发阶段不需要使用script进行加载

config.plugin('html').tap(args => {
    args[0].isProd = true
    return args
})
复制代码

然后在index.html中将加载的CDN用下面方法包裹

<% if(htmlWebpackPlugin.options.isProd) { %>
    里面为加载的CDN
<% } %>
复制代码

4.6.开启gzip压缩

npm i compression-webpack-plugin -S
复制代码

然后在vue.config.js中配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

module.exports = {
    configureWebpack: {
    plugins: [
      // 配置compression-webpack-plugin压缩
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}
复制代码

4.7.路由懒加载

可以使用路由的懒加载
在路由配置中文件的方式改为

const Home = () => import("./home")
复制代码

这样就实现了路由的懒加载