手把手撸一个 Vue3 + Ts + ElementPlus 后台管理模板

妖狐艹你老母 2022-08-29 00:07 610阅读 0赞

脚手架用的是`vue-cli`,`vite`还不太稳定，很多第三方库也存在兼容问题，为了能正常在实际项目中使用，还是选择了`vue-cli`。

如果不是最新的脚手架，就需要重新安装一下了：

npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

创建项目：

vue create vue3-ts-template
    
    // 选择Manually select features 
    
    composition-api ([Vue 2] router, vuex, less, babel, eslint) 
    Default ([Vue 2] babel, eslint) 
    Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
    ✅ Manually select features

*  \[✓\] Choose Vue version
 *  \[✓\] Babel
 *  \[✓\] TypeScript
 *  \[ \] Progressive Web App (PWA) Support
 *  \[✓\] Router
 *  \[✓\] Vuex
 *  \[✓\] CSS Pre-processors
 *  \[✓\] Linter / Formatter
 *  \[ \] Unit Testing
 *  \[ \] E2E Testing

然后 `Vue` 选 3.0, `css`预处理器，看个人习惯，`sass`,`less`,`stylus`都可以。

创建完项目，把那些不需要的页面例如:`helloword`删了就行了，有一个`shims-vue.d.ts` 得留着。

### 安装 ElementPlus ###

yarn add element-plus
    
    // main.ts
    
    import ElementPlus from 'element-plus';
    import 'element-plus/lib/theme-chalk/index.css';
    
    const app = createApp(App);
    app.use(ElementPlus);
    app.mount('#app');

## 登录页面 ##

页面内容没什么好说的，想怎么画就怎么画。

<el-form ref="ruleForm" :model="form">
     <el-form-item prop="email" :rules="{required:true, message:'请输入账号', trigger:'change'}">
      <el-input placeholder="请输入账号" v-model="form.email"></el-input>
     </el-form-item>
     <el-form-item prop="pass" :rules="{required:true, message:'请输入密码', trigger:'change'}">
      <el-input type="password" placeholder="请输入密码" v-model="form.pass"></el-input>
     </el-form-item>
     <el-form-item>
      <el-button class="width100" type="primary" @click="onSubmit">登陆</el-button>
     </el-form-item>
    </el-form>

说说验证吧！ElementPlus 官方文档里面，还是按照`Vue2.x`的方式`optionsApi`写的：![03cceae6e318c27bb60d0ed0ce41dd6f.png][]

但是我们既然采用了`vue3`，还是要紧跟时代步伐：

import { defineComponent, toRefs, reactive, ref } from 'vue';
    import { useRouter } from 'vue-router';
    
    interface UserForm {
     email: string;
     pass: string | number;
    }
    
    export default defineComponent({
     setup () {
      const router = useRouter();
      const state = reactive({
       form: {
        email: 'admin',
        pass: 'admin123'
       } as UserForm,
       ruleForm: ref<any>(null)
      });
      const onSubmit = () => {
       // ruleForm.value.validate
       state.ruleForm.validate().then((valid: boolean) => {
        if (valid) {
         if (state.form.email === 'admin') {
          router.push({ path: '/' });
         }
        }
       });
      };
    
      return {
       ...toRefs(state),
       onSubmit
      };
     }
    });

1.  `<el-form ref="ruleForm">` 绑定
2.  `ruleForm: ref<any>(null)` 声明`ruleForm`,并返回
3.  `state.ruleForm.validate()` 而不是 `state.ruleForm.value.validate()`

## 布局 ##

![8bf314ab9c482db9f7461e1f649e8615.png][]

<div :class="['wrapper',isCollapse?'hideSidebar':'']">
        <el-container>
          <el-aside :width="isCollapse?'64px':'210px'">
            <sidebar/>
          </el-aside>
          <el-container>
            <el-header height="50px">
              <topbar @reload="handleReload"/>
            </el-header>
            <el-main>
              <breadcrumb/>
              <div v-if="isRouterAlive">
                <app-main/>
              </div>
            </el-main>
            <el-footer>Footer</el-footer>
          </el-container>
        </el-container>
    </div>

### 刷新页面 ###

布局全凭自己喜欢，我这里采用最简单，最常见的布局。这里做了一个刷新主要内容的功能。

setup() {
      const isRouterAlive = ref<boolean>(true);
      const handleReload = () => {
     isRouterAlive.value = false;
     nextTick(() => {
      isRouterAlive.value = true;
     });
      };
      return {handleReload}
    }

### 网页全屏 ###

yarn add screenfull

import screenfull, { Screenfull } from 'screenfull';
    
    setup() {
        const change = () => {
       fullscreen.value = (screenfull as Screenfull).isFullscreen;
      };
     // 全屏事件
     const handleFullScreen = () => {
      if (!screenfull.isEnabled) {
       // 如果不允许进入全屏，发出不允许提示
       ElMessage({
        message: '暂不不支持全屏',
        type: 'warning'
       });
       return false;
      }
      screenfull.toggle();
     };
     if (screenfull.isEnabled) {
      screenfull.on('change', change);
     }
    }

> 要引入 Screenfull 这个接口，并做一下类型断言`(screenfull as Screenfull)`,不这样ts编译通不过。

## 引入axios ##

yarn add axios

import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
    import { ElMessage } from 'element-plus';
    const instance = axios.create({
     baseURL: process.env.VUE_APP_API_BASE_URL || '',
     timeout: 120 * 1000,
     withCredentials: true
    });
    
    const err = (error) => {
     if (error.message.includes('timeout')) {
      // console.log('error---->',error.config)
      ElMessage({
       message: '请求超时，请刷新网页重试',
       type: 'error'
      });
     }
     if (error.response) {
      const data = error.response.data;
      const token = '';
      if (error.response.status === 403) {
       ElMessage({
        message: 'Forbidden',
        type: 'error'
       });
      }
      if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
       ElMessage({
        message: 'Unauthorized',
        type: 'error'
       });
       if (token) {
        // store.dispatch('Logout').then(() => {
        //  setTimeout(() => {
        //   window.location.reload();
        //  }, 1500);
        // });
       }
      }
     }
     return Promise.reject(error);
    };
    instance.interceptors.request.use((config: AxiosRequestConfig) => {
     return config;
    }, err);
    
    instance.interceptors.response.use((response: AxiosResponse) => {
     console.log(response);
     const config: AxiosRequestConfig = response.config || '';
    
     const code = Number(response.data.status);
     if (code === 200) {
      if (config && config.successNotice) {
       ElMessage({
        message: response.data.msg,
        type: 'success'
       });
      }
      return response.data;
     } else {
      let errCode = [402, 403];
      if (errCode.includes(response.data.code)) {
       ElMessage({
        message: response.data.msg || '没有权限',
        type: 'warning'
       });
       setTimeout(() => {
        window.location.reload();
       }, 500);
      }
     }
    }, err);
    
    export default instance;

这个axios二次封装就见仁见智了，看你们的业务和习惯，我只提供一个示例。

挂载到全局：

import axios from '@/utils/request';
    
    app.config.globalProperties.$http = axios;
    
    // 使用
    
    import { getCurrentInstance } from 'vue';
    const { ctx } = getCurrentInstance() as any;
    
    ctx.$http(...).then(...)

这里需要说明一点的是，如果引入`AxiosResponse`, `AxiosRequestConfig`这两个接口来做类型判断。要是在config中定义了一些额外的参数，又要使用就需要定义一个声明文件了。

我在`config`中定义了`successNotice`和`errorNotice`分别来判断请求成功和失败是否需要提示信息，并且它们都是非必填。

// shims.axios.d.ts
    import { AxiosRequestConfig } from 'axios';
    
    declare module 'axios' {
      export interface AxiosRequestConfig {
        successNotice? : boolean,
        errorNotice? : boolean
      }
    }

## 二次封装组件 ##

为了更方便快捷的写业务，可以二次封装一些组件，简化操作。

### Table 表格 ###

<template>
    <div>
     <el-table
      border
      v-bind="$attrs"
      :data="data"
      :rowKey="rowKey"
      size='small'
      :onSelectionChange="handleSelectionChange"
     >
      <el-table-column v-if="allowSelect" type="selection" width="55"></el-table-column>
      <template v-for="item in columns" :key="item.prop">
       <el-table-column v-bind="item" v-if="item.slot" >
        <template v-slot:header>
         <slot :name="item.slot.header">{
        {item.label || '自定义header'}}</slot>
        </template>
        <template v-slot:default="scope">
         <slot :name="item.slot.body" :data="scope.row">{
        {scope.row[item.prop] || '需要自定义' }}</slot>
        </template>
       </el-table-column>
       <el-table-column v-else v-bind="item"></el-table-column>
      </template>
      <slot/>
     </el-table>
     <HeroPaging
      v-if="showPaging"
      class="marginT10 text-right"
      :pagination="pagination"
      @pagingChange="handlePagingChange"/>
    </div>
    </template>
    
    <script>
    import { defineComponent, PropType } from 'vue';
    import HeroPaging from '../HeroPaging/index';
    export default defineComponent({
     components: { HeroPaging },
     props: {
         // 数据
      data: {
       type: Array,
       default: () => []
      },
      // 表格项
      columns: {
       type: Array,
       default: () => []
      },
      // 绑定key
      rowKey: {
       type: String,
       default: 'id'
      },
      // 分页信息
      pagination: {
       type: Object,
       default: () => {
        return {
         page: 1,
         pageSize: 10,
         total: 100
        };
       }
      },
      // 是否可选
      allowSelect: {
       type: Boolean,
       default: false
      },
      // 是否分页
      showPaging: {
       type: Boolean,
       default: true
      }
     },
     setup (props, { emit, slots, attrs }) {
      let multipleSelection = [];
      const handleSelectionChange = (val) => {
       multipleSelection = val;
       emit('select', multipleSelection);
      };
      const handlePagingChange = (option) => {
       emit('pagingChange', option);
      };
      return {
       handleSelectionChange,
       handlePagingChange
      };
     }
    });
    </script>

在一些常见的业务场景下，用起来就比较方便了：

![8340faf17f42f7767c98ade52d5b3ba0.png][]

<HeroTable
     :allowSelect="true"
     :data="tableData"
     :columns="columns"
     @select="handleSelect"
     @pagingChange="handlePagingChange"
    >
     <template v-slot:dateHeader>
      <el-tag type="success">日期</el-tag>
     </template>
     <template v-slot:date="scope" >
      {
        {scope.data.date}}自定义slot
     </template>
     <template v-slot:action="scope">
      <span class="btn" @click="handleCLick('edit', scope.data)">编辑</span >
      <el-divider direction="vertical"></el-divider>
      <span class="btn red" @click="handleCLick('del', scope.data)">删除</span>
     </template>
    </HeroTable>
    
    <script>
    const columns = [
     { prop: 'date', label: '日期', fixed: true, width: 200, slot: { body: 'date', header: 'dateHeader' } },
     { prop: 'name', label: '姓名', width: 200 },
     { prop: 'address', label: '地址', width: 500 },
     { prop: 'class', label: '班级', width: 200 },
     { prop: 'school', label: '学校', width: 200 },
     { prop: '', label: '操作', width: 110, slot: { body: 'action' }, fixed: 'right' }
    ];
    </script>

### Form 表单 ###

<template>
      <div>
        <el-form ref="formRef" label-suffix=":" :model="form" :label-width="labelWidth">
          <el-form-item
          v-for="item in formJson"
          :key="item.val"
          :label="item.label"
          :prop="item.val"
          :rules="{required: item.require, message:item.errMsg || item.placeholder || item.label + '是必填项', trigger:'change'}"
          >
            <template v-if="['input','textarea'].includes(item.type)">
              <el-input :type="item.type" v-bind="item.other" v-model="form[item.val]" :placeholder="item.placeholder"></el-input>
            </template>
            <template v-if="item.type === 'select'">
              <el-select v-bind="item.other" v-model="form[item.val]" placeholder="">
                <el-option
                  v-for="op in item.options"
                  :key="op[item.selectVal]"
                  :label="op[item.selectLabel]"
                  :value="op[item.selectVal]">
                </el-option>
              </el-select>
            </template>
            <template v-if="item.type === 'date'">
              <HeroDatePicker v-bind="item.other" v-model="form[item.val]"/>
            </template>
            <template v-if="item.type === 'radio'">
              <el-radio-group v-bind="item.other" v-model="form[item.val]">
                <el-radio v-for="op in item.options" :key="op[item.selectVal]" :label="op[item.selectVal]">{
        {op[item.selectLabel]}}</el-radio>
              </el-radio-group>
            </template>
            <template v-if="item.type === 'checkbox'">
              <el-checkbox-group v-bind="item.other" v-model="form[item.val]">
                <el-checkbox v-for="op in item.options" :key="op[item.selectVal]" :label="op[item.selectVal]">{
        {op[item.selectLabel]}}</el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-if="item.type === 'switch'">
              <el-switch
                v-bind="item.other"
                v-model="form[item.val]">
              </el-switch>
            </template>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    import { computed, defineComponent, reactive, toRefs, ref, watch, watchEffect } from 'vue';
    import HeroDatePicker from '@/components/HeroDatePicker/index';
    export default defineComponent({
     components: { HeroDatePicker },
     props: {
      labelWidth: {
       type: String,
       default: '90px'
      },
      formJson: {
       type: Array,
       default: () => []
      },
      modelValue: {
       type: Object,
       default: () => ({})
      }
     },
     setup (props, { emit }) {
      const formRef = ref(null);
      const state = reactive({
       form: computed(() => props.modelValue)
      });
      watch(() => state.form, (val) => {
       emit('update:modelValue', val);
      }, { deep: true });
    
      const validate = () => {
       return new Promise((resolve, reject) => {
        formRef.value.validate().then((valid) => {
         resolve(valid);
        }).catch(err => { reject(err); });
       });
      };
    
      return {
       ...toRefs(state),
       validate,
       formRef
      };
     }
    });
    </script>

![f043e4df19582477f7c1d0817c4c2ef8.png][]

<HeroForm ref="formRef" :formJson="formJson" v-model="form"/>
    <el-button type="primary" @click="onSubmit">提交</el-button>
    
    
    steup() {
     const formJson = [
        {
         require: true,
         type: 'input',
         label: '姓名',
         placeholder: '请输入姓名',
         val: 'name',
         other: { style: 'width:220px' }
        },
        {
         require: true,
         type: 'select',
         label: '年级',
         placeholder: '请选择年级',
         val: 'grade',
         selectLabel: 'label',
         selectVal: 'val',
         options: [{ val: 1, label: '一年级' }, { val: 2, label: '二年级' }]
        },
        ....
     ]
    }

这里需要提的一点是，自定义组件的`v-model`实现。

vue2的实现方式:

<ChildComponent v-model="pageTitle" />
    
    // ChildComponent.vue
    export default {
      model: {
        prop: 'title',
        event: 'change'
      },
      props: {
        // 这将允许 `value` 属性用于其他用途
        value: String,
        // 使用 `title` 代替 `value` 作为 model 的 prop
        title: {
          type: String,
          default: 'Default title'
        }
      }
    }

vue3的实现方式：

<ChildComponent v-model="pageTitle" />
    
    // ChildComponent.vue
    export default {
      props: {
        modelValue: String // 以前是`value：String`
      },
      methods: {
        changePageTitle(title) {
          this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
        }
      }
    }

更多具体介绍可前往官网。

### DatePicker 时间选择器 ###

`DatePicker` 为啥要封装一下？因为官方把`value-format`这个功能取消了(可以看看这个issues)，所以每次都要自己去转化一次时间格式，太麻烦。

![4ad0511813c9e085da82e15de0a863a4.png][]

<template>
      <div>
        <el-date-picker
          v-bind="$attrs"
          v-model="value"
          :type="type"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </template>
    
    <script>
    import { defineComponent, watch, reactive, toRefs } from 'vue';
    import dayjs from 'dayjs';
    export default defineComponent({
     props: {
      type: {
       type: String,
       default: 'date'
      },
      modelValue: {
       type: [String, Object, Array],
       default: ''
      },
      valueFormat: {
       type: String,
       default: 'YYYY-MM-DD'
      }
     },
     setup (props, { emit }) {
      const state = reactive({
       value: props.modelValue || ''
      });
      watch(() => state.value, (val) => {
       let formatVal = null;
       if (Array.isArray(val)) {
        formatVal = [dayjs(val[0]).format(props.valueFormat), dayjs(val[1]).format(props.valueFormat)];
       } else {
        formatVal = dayjs(val).format(props.valueFormat);
       }
       console.log(formatVal);
       emit('update:modelValue', formatVal);
      });
      return {
       ...toRefs(state)
      };
     }
    });
    </script>

> `elemment-plus` 已经把`moment`换成了`dayjs`，我们不需要再安装就可以直接使用。

二次封装呀，我觉得有一点很重要，我们不可能把原来组件的所有props都穷举一遍，所以加上`v-bind="$attrs"`可以省很多事。

## 最后 ##

这只是个简单的模板，可以用熟悉一下Vue3 和 Ts，要想在实际开发中使用，还是要慎重。

仓库地址：vue3\_elementPlus\_ts（点击**阅读原文**即可跳转）

**如果觉得这篇文章还不错**

**点击下面卡片关注我**

**来个【分享、点赞、在看】三连支持一下吧![9b5b8a687db12a157e933ad0b0ce9f48.png][]**

![3d6dd7f5ea72ac37519b1b9cbe242914.png][]

**“分享、点赞、在看” 支持一波** ![9f4d55265db798a88a571b43179fcec2.png][]

[03cceae6e318c27bb60d0ed0ce41dd6f.png]: /images/20220829/35df282b7ab443ec9082c6d2c19507be.png
[8bf314ab9c482db9f7461e1f649e8615.png]: /images/20220829/35f9af0e454546bb900bc01b108d8749.png
[8340faf17f42f7767c98ade52d5b3ba0.png]: /images/20220829/a9e5c0db01f244458c2b26f9af87ecf2.png
[f043e4df19582477f7c1d0817c4c2ef8.png]: /images/20220829/2e31ec2c28b04cd386b2588e9ee91667.png
[4ad0511813c9e085da82e15de0a863a4.png]: /images/20220829/505734897d114963a1fb9714a64a0c7c.png
[9b5b8a687db12a157e933ad0b0ce9f48.png]: /images/20220829/103222eb36bf42869a20894f00503d4f.png
[3d6dd7f5ea72ac37519b1b9cbe242914.png]: /images/20220829/3b1c8181c76e4da4a794e4ed9656bbb3.png
[9f4d55265db798a88a571b43179fcec2.png]: /images/20220829/3651937d533744c4af053990ddfa8303.png