Vue3 Vite 使用 tailwindcss & element-plus & iconify_vite引入tailwindcss elementplus

安装和使用 tailwindcss

• 官方参考地址：https://www.tailwindcss.cn/docs/guides/vue-3-vite
• 新建 Vue vite 项目，然后安装tailwindcss

# vue-3-vite 中安装
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# 初始化，新增 tailwind.config.js and postcss.config.js
npx tailwindcss init -p
1
2
3
4

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
// tailwind.config.js
module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 新增一个index.css文件

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
1
2
3
4

• 导入至 src/main.ts 中

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')
1
2
3
4
5
6

• 至此结束，可以使用了，使用时查官网，添加class里面写就行了
• 【如何解决出现Unknown at rule @applyscss(unknownAtRules)警告？】

安装和使用 element-plus

• 安装

# 安装
pnpm install element-plus
1
2

• 使用

// main.ts，完整使用
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11

• 推荐使用方式：自动按需导入

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

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// import * as path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

element-plus与tailwindcss 冲突问题

• 【Vite中ElementPlus和TailwindCSS最佳实践（一）】

• 解决办法一，github地址

• 解决办法二，github地址

• 解决办法三，github地址

• 【Vite中ElementPlus和TailwindCSS最佳实践（二）】

• 参考地址：最好的使用，可以开箱即用 https://github.com/whidy/elementplus-tailwindcss-best-practice/tree/extend-colors

• element.ts

/**
 * 兼容tailwindcss主题和ElementPlus色彩的扩展方案 By Whidy 2022-01-14 11:29:05
 * element plus 主题：https://element-plus.gitee.io/zh-CN/guide/theming.html
 * Colors：https://element-plus.gitee.io/zh-CN/component/color.html
 * Element Chalk Variables
 * node_modules/element-plus/theme-chalk/src/common/var.scss
 * 部分色彩见底部注释
 */

const palettes = {
  base: ["primary", "success", "warning", "danger", "error", "info"],
  hasLight9: ["primary"],
  hasLight2: ["success", "warning", "danger", "error", "info"] // danger === error
};

const hasLight9 = function (group) {
  const colors = {};
  group.forEach(name => {
    colors[`el-${name}-light`] = {};
    for (let index = 9; index > 0; index--) {
      colors[`el-${name}-light`][index * 100] = `var(--el-color-${name}-light-${index})`;
    }
  });
  return colors;
};

const hasLight2 = function (group) {
  const colors = {};
  group.forEach(name => {
    colors[`el-${name}-light`] = `var(--el-color-${name}-light)`;
    colors[`el-${name}-lighter`] = `var(--el-color-${name}-lighter)`;
  });
  return colors;
};

const baseColor = function (group) {
  const colors = {};
  group.forEach(name => {
    colors[`el-${name}`] = `var(--el-color-${name})`;
  });
  return colors;
};

const getColors = function (palettes) {
  const colors = {};
  for (const key in palettes) {
    const group = palettes[key];
    if (key === "base") {
      Object.assign(colors, baseColor(group));
    } else if (key === "hasLight9") {
      Object.assign(colors, hasLight9(group));
    } else if (key === "hasLight2") {
      Object.assign(colors, hasLight2(group));
    }
  }
  // console.log(colors);
  return colors;
};
module.exports = {
  theme: {
    extend: {
      colors: getColors(palettes)
    }
  }
};


// 部分参考
// --el-color-white: #ffffff;
// --el-color-black: #000000;
// --el-color-primary: #409eff;
// --el-color-primary-light-1: #53a8ff;
// --el-color-primary-light-2: #66b1ff;
// --el-color-primary-light-3: #79bbff;
// --el-color-primary-light-4: #8cc5ff;
// --el-color-primary-light-5: #a0cfff;
// --el-color-primary-light-6: #b3d8ff;
// --el-color-primary-light-7: #c6e2ff;
// --el-color-primary-light-8: #d9ecff;
// --el-color-primary-light-9: #ecf5ff;
// --el-color-success: #67c23a;
// --el-color-success-light: #e1f3d8;
// --el-color-success-lighter: #f0f9eb;
// --el-color-warning: #e6a23c;
// --el-color-warning-light: #faecd8;
// --el-color-warning-lighter: #fdf6ec;
// --el-color-danger: #f56c6c;
// --el-color-danger-light: #fde2e2;
// --el-color-danger-lighter: #fef0f0;
// --el-color-error: #f56c6c;
// --el-color-error-light: #fde2e2;
// --el-color-error-lighter: #fef0f0;
// --el-color-info: #909399;
// --el-color-info-light: #e9e9eb;
// --el-color-info-lighter: #f4f4f5;
// --el-text-color-primary: #303133;
// --el-text-color-regular: #606266;
// --el-text-color-secondary: #909399;
// --el-text-color-placeholder: #c0c4cc;
// --el-border-color-base: #dcdfe6;
// --el-border-color-light: #e4e7ed;
// --el-border-color-lighter: #ebeef5;
// --el-border-color-extra-light: #f2f6fc;
// --el-background-color-base: #f5f7fa;
// --el-border-width-base: 1px;
// --el-border-style-base: solid;
// --el-border-color-hover: var(--el-text-color-placeholder);
// --el-border-base: var(--el-border-width-base) var(--el-border-style-base) var(--el-border-color-base);
// --el-border-radius-base: 4px;
// --el-border-radius-small: 2px;
// --el-border-radius-round: 20px;
// --el-border-radius-circle: 100%;
// --el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12),0 0 6px rgba(0, 0, 0, 0.04);
// --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
// --el-svg-monochrome-grey: #dcdde0;
// --el-fill-base: var(--el-color-white);
// --el-font-size-extra-large: 20px;
// --el-font-size-large: 18px;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

• vite.config.ts

import { resolve } from "path";
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'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
        // 初始化tailwindcss文件，放入至main.ts中路径一致
          if (id.includes("src/index.css")) {
            return "tailwindcss";
          }
          if (id.includes("element-plus/theme-chalk/")) { // 当然也可以优化下这个判断，不过目前这样写足矣了。
            return "element-plus";
          }
        },
      },
    },
  },
  server: {
    port: 3201
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

• tailwind.config.ts

module.exports = {
  presets: [
    require("./src/assets/styles/element.ts") // 根据您放置的element.ts配置路径
  ],
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  plugins: [],
}

1
2
3
4
5
6
7
8

安装和使用 iconify

• 图标网址：https://icon-sets.iconify.design/logos/alfresco/
• 这一个也可以使用：https://www.xicons.org/#/

 pnpm add @iconify/iconify
 pnpm add vite-plugin-purge-icons @iconify/json -D
1
2

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import PurgeIcons from 'vite-plugin-purge-icons';
// import * as path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    PurgeIcons({
      content: ['**/*.html', '**/*.ts', '**/*.js', '**/*.vue'],
    }),
  ],
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// main.ts
import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import piniaPluginPersist from 'pinia-plugin-persist';
import './assets/styles/input.css';
import '@purge-icons/generated'; // 添加进来
const pinia = createPinia();
pinia.use(piniaPluginPersist);
const app = createApp(App);
app.use(router);
app.use(pinia);
app.mount('#app');
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 以组件的方式使用

// 定义图标组件，设置传入大小和图标名称
<script setup lang="ts">
const props = defineProps({
    icon: {
        type: String,
        default: () => 'logos:airflow'
    },
    size: {
        type: String,
        default: () => "100"
    },
})
</script>

<template>
    <span
        class="iconify"
        :data-icon="props.icon"
        :data-width="props.size"
        :data-height="props.size"
    ></span>
</template>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 使用
<app-icon icon="logos:alfresco" size="500"></app-icon>
1
2