Vite2.x + Vue3.x + Typescript + Element-plus搭建完整的后台管理系统项目

阿彪师傅

已于 2022-05-10 10:04:13 修改

阅读量2.5k

点赞数 2

分类专栏： vue3 文章标签： vue typescript html elementui

于 2021-03-28 17:10:25 首次发布

本文链接：https://blog.csdn.net/gongjin2012/article/details/115283514

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

听说2021年是vue3.0大爆发的一年 😂
话说vue3.0正式版都发布大半年了，你不会对vue3.0还一知半解吧 😭😭
长话不短说，完整版本的vite2.x + vue3.x + typescript + element-plus教程送给大家
完整版仓库地址请点击

依赖版本

vite@2.1.3 依赖node版本12.x.x以上

element-plus@1.0.2-beta.35

Vue-router@4.0.5

vuex@4.0.0

axios@0.21.1

一、初始化一个vite项目

1. npm init @vitejs/app  或者  yarn create @vitejs/app // 默认vite最新版本2.1.3
2. Select a template: vue-ts

1.1 vite.config.ts 配置

// 下载按需加载的插件 vite-plugin-style-import

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src') //设置别名
        }
    },
    plugins: [
        vue(),
        styleImport({
            libs: [
                {
                    libraryName: 'element-plus',
                    esModule: true,
                    resolveStyle: (name) => {
                        // 由于引入了local语言配置，所以这里会加载local.css文件，但是不存在此文件，故会报错
                        // if (name === 'locale') {
                        //     return 'element-plus/lib/theme-chalk/el-option.css';
                        // }
                        return `element-plus/lib/theme-chalk/${name}.css`;
                    },
                    ensureStyleFile: true // 忽略文件是否存在, 导入不存在的CSS文件时防止错误。
                }
            ]
        })
    ],
    server: {
        port: 3000, //启动端口
        hmr: {
            host: '127.0.0.1',
            port: 3000
        }
    }
});

二、添加eslint和prettier

// 安装eslint和prettier依赖
npm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier --save-dev

// 安装typescript依赖
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

文章内容限制，请直接进入仓库复制即可, 仓库地址

三、添加vue-router

npm install vue-router@next (下载4.0.5版本)

// 创建router/index.ts文件，配置如下
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
    {
        path: '/login',
        name: 'Login',
        meta: {
            title: '登录',
            keepAlive: true,
            requireAuth: false
        },
        component: () => import('@/views/login/login.vue')
    },
    {
        path: '/',
        name: 'Index',
        meta: {
            title: '首页',
            keepAlive: true,
            requireAuth: true
        },
        component: () => import('@/views/home/index.vue')
    }
];
const router = createRouter({
    history: createWebHistory(),
    routes
});
export default router;

四、添加vuex(可选，不用的可忽略)

// 下载
npm install vuex@next (下载4.0.0版本)

// 创建store/index.ts文件，配置如下

import { createStore } from 'vuex';

export interface State {
    userInfo: {
        id: number;
        username: string;
        nickname: string;
    };
}

export const store = createStore<State>({
    state() {
        return {
            userInfo: {
                id: 0,
                username: '',
                nickname: ''
            }
        };
    },
    mutations: {
        setUserInfo(state, userInfo) {
            storage.set('userInfo', userInfo);
            state.userInfo = userInfo;
        }
    }
});

需要注意的是，需全局添加d.ts类型定义

// 创建shims-store.d.ts

import { Store } from '@/store';

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $store: Store;
    }
}

五、添加axios（不需要可忽略）

// 下载axios
npm install axios

// 创建axios实例文件 axios.ts
import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';

const service = axios.create();

// Request interceptors
service.interceptors.request.use(
    (config: AxiosRequestConfig) => {
        // do something
        return config;
    },
    (error: any) => {
        Promise.reject(error);
    }
);

// Response interceptors
service.interceptors.response.use(
    async (response: AxiosResponse) => {
        // do something
    },
    (error: any) => {
        if (error && error.response) {
            // do something
        } else {
            if (error.message == 'Network Error') {
                error.message == '网络异常！';
            }
            error.message = '网络异常';
        }
        return Promise.reject(error);
    }
);

export default service;

需要注意的是，需全局添加d.ts类型定义

// 创建shims-axios.d.ts

import { AxiosInstance, AxiosRequestConfig, AxiosPromise } from 'axios';
declare module 'axios' {
    export interface AxiosInstance {
        <T = any>(config: AxiosRequestConfig): Promise<T>;
        request<T = any>(config: AxiosRequestConfig): Promise<T>;
        get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
        delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
        head<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
        post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
        put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
        patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    }
}

六、修改main.ts配置

import { createApp } from 'vue';
import App from '@/App.vue';
import router from '@/router';
import { store } from '@/store';

// 创建vue实例
const app = createApp(App);
app.use(router);
app.use(store);

// 挂载实例
app.mount('#app');

七、添加element-plus

npm install element-plus

7.1 按需加载element-plus

// 创建一个文件 config/element.ts

import lang from 'element-plus/lib/locale/lang/zh-cn';
import 'dayjs/locale/zh-cn';
import {
    locale,
    ElButton,
    ElCol,
    ElForm,
    ElFormItem,
    ElInput,
    ElRow,
    ElTable,
    ElTableColumn,
    ElUpload,
    ElPagination,
    ElInfiniteScroll,
    ElLoading,
    ElMessage,
    ElMessageBox,
    ElNotification
} from 'element-plus';

const components = [
    ElButton,
    ElCol,
    ElForm,
    ElFormItem,
    ElInput,
    ElRow,
    ElTable,
    ElTableColumn,
    ElUpload,
    ElPagination
];

const plugins = [ElInfiniteScroll, ElLoading, ElMessage, ElMessageBox, ElNotification];

// 由于vue中没有对应的ts类型，故此处的app as any
export const setupElement = (app: any, options = {}) => {
    // 引入语言，不引入默认英语
    locale(lang);
    // 全局注册组件
    components.forEach((component) => {
        app.component(component.name, component);
    });

    // 注册element-plus services
    plugins.forEach((plugin) => {
        app.use(plugin);
    });

    // 设置全局option，默认 {}
    app.config.globalProperties.$ELEMENT = options;
};

7.2 在main.ts中引入即可

...
import { setupElement } from '@/config/element';

// 创建vue实例
const app = createApp(App);

// 按需引入element-plus插件
setupElement(app);
...

// 挂载实例
app.mount('#app');

7.3 使用element-plus注意报错事项：

Failed to resolve import “xx/node_modules/element-plus/lib/theme-chalk/locale.css”

只需要 vite.config.ts 中配置即可，详见 1.1 vite.config.ts 配置

Property ‘$confirm’ does not exist on type ‘CreateComponentPublicInstance<{}, { tableData: tableDataProps[]; }, {}, {}, { deleteRow(): void; }, ComponentOptionsMixin, ComponentOptionsMixin, … 10 more …, {}>’.Vetur(2339)

此问题是由于全局引入了element-plus中的 $confirm 或 $message，而没有被ts识别

解决：

// 在文件src/types/shims-store.d.ts 下添加对应的类型定义	
import { Store } from '@/store';
import { ElMessage, ElMessageBox } from 'element-plus';

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $store: Store;
        $message: typeof ElMessage;
        $confirm: typeof ElMessageBox.confirm;
    }
}