Vue3 + Unocss + Typescript + Vite真香

install vscode + vite + vue3 + ts + eslint + stylelint 代码自动格式化 juejin.cn/post/702272…

install vue-router@4

npm i vue-router@4

install element-plus

npm i -D element-plus
// iocn
npm i -D element-plus/icons-vue

install unplugin-vue-components

npm i -D unplugin-vue-components unplugon-auto-import

install unocss

npm i -D unocss @unocss/preset-icons @iconify/json

install unplugin-icons

npm i -D unplugin-icons

setting vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Unocss from 'unocss/vite'
import UnocssIcons from '@unocss/preset-icons'
import { presetAttributify, presetUno } from 'unocss'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        Icons({
            defaultClass: 'inline',
            defaultStyle: 'vertical-align: sub;',
        }),
        Unocss({
            presets: [
                UnocssIcons({
                    extraProperties: {
                        display: 'inline-block',
                        height: '1.2em',
                        width: '1.2em',
                        'vertical-align': 'text-bottom',
                    },
                }),
                presetAttributify(),
                presetUno(),
            ],
        }),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver(), IconsResolver({
                componentPrefix: '',
            })],
        }),
        vue(),
    ],
    resolve: {
        alias: {
            '@': '/src',
        },
    },
})

传送门：github.com/limeiwang/v…