现在进入页面开发，组件库选择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 tailwindcss@3.0.23 autoprefixer@10.0.2 postcss@8.1.0
详细的安装可以参考在 Vue 3 和 Vite 安装 Tailwind CSS
在vscode安装插件有助于提升写tailwindcss语法
image.png
- 然后再src下面新建styles/index.css
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
width: 100%;
height: 100%;
}
- 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: [],
}
