三、整合 element-plus + tailwindcss

前言

由于我不擅长写前端的样式，经过多方考虑选择了使用人群较多的 element-plus 组件库，tailwindcss 是一个 css 框架，集成了很多封装好的 css 样式，我们只需要在标签上定义约定好的类名，就可以给元素添加相应的样式，十分方便。当然你也可以不使用，全部手撸。 想进一步了解，请参考官方文档：element-plus: element-plus.gitee.iotailwindcss: www.tailwindcss.cn

1. CSS 预处理器安装

主流的一些预处理器，像less、sass我都没有用过，对于我来讲都一样，由于 element-plus 使用的是 sass，所以我也选择 sass( •̀ ω •́ )✧。详细了解参考官方地址：www.sass.hk/

安装依赖

npm install sass sass-loader --save-dev

2. 整合 element-plus

2.1 安装依赖

npm install element-plus --save

2.2 快速使用

官方推荐使用自动导入，其他方式参考官网 element-plus.gitee.io/zh-CN/guide…

① 首先安装需要的插件

npm install -D unplugin-vue-components unplugin-auto-import

② 修改 vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

③ 测试一下

<!-- 在App.vue中测试  -->
<el-button type="primary" size="default" >登录</el-button>

3. 整合 tailwindcss

参考官方：www.tailwindcss.cn/docs/guides…

3.1 安装依赖

npm install -D tailwindcss postcss autoprefixer

3.2 初始化生成配置文件

npx tailwindcss init -p

3.3 修改配置文件，添加作用范围

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

TIPS:这里可能会爆红，提示为在 ES 模块中尝试加载一个 CommonJs 模块，保持统一，这里我选择转成 ES 模块

export const content = ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
export const theme = {
  extend: {}
}
export const plugins = []

3.4 将 tailwind 的指令集导入到我们项目中

• 创建src/styles目录，新建 index.scss 文件

// index.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

• main.ts 中引入 index.scss

// main.ts
// 导入全局样式
import './styles/index.scss'

3.5 测试一下

我们在之前添加的按钮上 定义一个类 class="bg-green-500"

<el-button type="primary" size="default" class="bg-green-500" >登录</el-button>

可以看到已经生效了

强迫症患者看这里！！！

如果你按照我上面的步骤走完，会发现有警告

心里不得劲，我要给他干掉，这里警告是因为，vscode 检测不到定义规则类型，在.vscode目录下，找到 setting.json,

{
    ...
   // 添加以下内容
  "scss.lint.unknownAtRules": "ignore"
}

一下子感觉世界都干净了。😄

补充

这里按上面的方法引入会有样式冲突问题，具体解决方案看这里：juejin.cn/editor/draf…