vite+vue3+ts+pinia+element-plus搭建项目（三）

现在进入页面开发，组件库选择Element Plus，考虑到前端写样式每个人的写法都不同，这样维护起来也是比较麻烦的，所以选择 Tailwindcss ，这样开发过程不用去想很多的类名，不用再去写css代码

element-plus 按需引入

yarn add unplugin-vue-components --save-dev

// 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 { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: resolve(__dirname, 'src/auto-import.d.ts'),
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

重新执行yarn dev 会在src目录下生成components.d.ts文件，也就是当前项目已经按需引用的组件，而且打包后也会将组件按需打包

tailwindCss 按需引入

yarn add [email protected] [email protected] [email protected]

详细的安装可以参考在 Vue 3 和 Vite 安装 Tailwind CSS
在vscode安装插件有助于提升写tailwindcss语法

image.png

1. 然后再src下面新建styles/index.css

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  width: 100%;
  height: 100%;
}

2. main.ts引入即可

注意事项 直接安装好后，在vue模板里面写tailwindcss 不生效，需要在tailwind.config.ts配置purge，还可以做到在打包时将引用的样式打包，没有引用的样式不参与打包

module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.{vue,js,ts,jsx,tsx}', './index.html'],
  },
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}