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

前言

• 听说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

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