手把手?jǐn)]一個(gè) Vue3 + Ts + ElementPlus 后臺(tái)管理模板
腳手架用的是vue-cli,vite還不太穩(wěn)定，很多第三方庫(kù)也存在兼容問題，為了能正常在實(shí)際項(xiàng)目中使用，還是選擇了vue-cli。
如果不是最新的腳手架，就需要重新安裝一下了：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
創(chuàng)建項(xiàng)目：
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預(yù)處理器，看個(gè)人習(xí)慣，sass,less,stylus都可以。
創(chuàng)建完項(xiàng)目，把那些不需要的頁面例如:helloword刪了就行了，有一個(gè)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');
登錄頁面
頁面內(nèi)容沒什么好說的，想怎么畫就怎么畫。
<el-form ref="ruleForm" :model="form">
<el-form-item prop="email" :rules="{required:true, message:'請(qǐng)輸入賬號(hào)', trigger:'change'}">
<el-input placeholder="請(qǐng)輸入賬號(hào)" v-model="form.email"></el-input>
</el-form-item>
<el-form-item prop="pass" :rules="{required:true, message:'請(qǐng)輸入密碼', trigger:'change'}">
<el-input type="password" placeholder="請(qǐng)輸入密碼" 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>
說說驗(yàn)證吧！ElementPlus 官方文檔里面，還是按照Vue2.x的方式optionsApi寫的：
但是我們既然采用了vue3，還是要緊跟時(shí)代步伐：
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
};
}
});
-
<el-form ref="ruleForm">綁定 -
ruleForm: ref<any>(null)聲明ruleForm,并返回 -
state.ruleForm.validate()而不是state.ruleForm.value.validate()
布局
<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>
刷新頁面
布局全憑自己喜歡，我這里采用最簡(jiǎn)單，最常見的布局。這里做了一個(gè)刷新主要內(nèi)容的功能。
setup() {
const isRouterAlive = ref<boolean>(true);
const handleReload = () => {
isRouterAlive.value = false;
nextTick(() => {
isRouterAlive.value = true;
});
};
return {handleReload}
}
網(wǎng)頁全屏
yarn add screenfull
import screenfull, { Screenfull } from 'screenfull';
setup() {
const change = () => {
fullscreen.value = (screenfull as Screenfull).isFullscreen;
};
// 全屏事件
const handleFullScreen = () => {
if (!screenfull.isEnabled) {
// 如果不允許進(jìn)入全屏，發(fā)出不允許提示
ElMessage({
message: '暫不不支持全屏',
type: 'warning'
});
return false;
}
screenfull.toggle();
};
if (screenfull.isEnabled) {
screenfull.on('change', change);
}
}
要引入 Screenfull 這個(gè)接口，并做一下類型斷言
(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: '請(qǐng)求超時(shí)，請(qǐng)刷新網(wǎng)頁重試',
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 || '沒有權(quán)限',
type: 'warning'
});
setTimeout(() => {
window.location.reload();
}, 500);
}
}
}, err);
export default instance;
這個(gè)axios二次封裝就見仁見智了，看你們的業(yè)務(wù)和習(xí)慣，我只提供一個(gè)示例。
掛載到全局：
import axios from '@/utils/request';
app.config.globalProperties.$http = axios;
// 使用
import { getCurrentInstance } from 'vue';
const { ctx } = getCurrentInstance() as any;
ctx.$http(...).then(...)
這里需要說明一點(diǎn)的是，如果引入AxiosResponse, AxiosRequestConfig這兩個(gè)接口來做類型判斷。要是在config中定義了一些額外的參數(shù)，又要使用就需要定義一個(gè)聲明文件了。
我在config中定義了successNotice和errorNotice分別來判斷請(qǐng)求成功和失敗是否需要提示信息，并且它們都是非必填。
// shims.axios.d.ts
import { AxiosRequestConfig } from 'axios';
declare module 'axios' {
export interface AxiosRequestConfig {
successNotice? : boolean,
errorNotice? : boolean
}
}
二次封裝組件
為了更方便快捷的寫業(yè)務(wù)，可以二次封裝一些組件，簡(jiǎn)化操作。
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: {
// 數(shù)據(jù)
data: {
type: Array,
default: () => []
},
// 表格項(xiàng)
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>
在一些常見的業(yè)務(wù)場(chǎng)景下，用起來就比較方便了：
<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: '班級(jí)', width: 200 },
{ prop: 'school', label: '學(xué)校', 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 + '是必填項(xiàng)', 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>
<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: '請(qǐng)輸入姓名',
val: 'name',
other: { style: 'width:220px' }
},
{
require: true,
type: 'select',
label: '年級(jí)',
placeholder: '請(qǐng)選擇年級(jí)',
val: 'grade',
selectLabel: 'label',
selectVal: 'val',
options: [{ val: 1, label: '一年級(jí)' }, { val: 2, label: '二年級(jí)' }]
},
....
]
}
這里需要提的一點(diǎn)是，自定義組件的v-model實(shí)現(xiàn)。
vue2的實(shí)現(xiàn)方式:
<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的實(shí)現(xiàn)方式：
<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)`
}
}
}
更多具體介紹可前往官網(wǎng)。
DatePicker 時(shí)間選擇器
DatePicker 為啥要封裝一下？因?yàn)楣俜桨?code style="margin-right: 2px;margin-left: 2px;padding: 2px 4px;font-size: 14px;border-radius: 4px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(60, 112, 198);">value-format這個(gè)功能取消了(可以看看這個(gè)issues)，所以每次都要自己去轉(zhuǎn)化一次時(shí)間格式，太麻煩。
<!--
format: https://day.js.org/docs/zh-CN/display/format
-->
<template>
<div>
<el-date-picker
v-bind="$attrs"
v-model="value"
:type="type"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"
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已經(jīng)把moment換成了dayjs，我們不需要再安裝就可以直接使用。
二次封裝呀，我覺得有一點(diǎn)很重要，我們不可能把原來組件的所有props都窮舉一遍，所以加上v-bind="$attrs"可以省很多事。
最后
這只是個(gè)簡(jiǎn)單的模板，可以用熟悉一下Vue3 和 Ts，要想在實(shí)際開發(fā)中使用，還是要慎重。
“分享、點(diǎn)贊、在看” 支持一波 
評(píng)論
圖片
表情