【Vue3】Vue3+Element-Plus+Vite+Tailwindcss 随记_vscode 插件 vue3 element-plus

vue系列

---

---

1. Elemet-Plus

1.1 elemet-plus 输入框无法输入

使用 element-plus 的表单 el-form 套用el-input 时，el-input 无法输入。

解决：

// element plus 官方文档
// 数据绑定不能用错
el-form  用 :model
el-input 用 v-model 不能用 :model
1
2
3
4

1.2 element-plus修改主题色

前提（依赖）：1.需要安装sass 2.ts环境下需要@types/node
开始！

1. 新建一个样式文件用于合并你的变量和 element-plus 的变量
   例如：assets/styles/element.scss
   内容为：

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': black,
    ),
  ),
);

html, body, #app {
    width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 修改 vite.config.ts 如下

// https://vitejs.dev/config/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// element-plus 按需引入插件
import ElementPlus from 'unplugin-element-plus/vite'
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({
    resolve: {
        alias: {
            // 资源路径
            '~/': `${path.resolve(__dirname, 'src')}/`,
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                // 添加修改主题色样式
                additionalData: `@use "~/assets/styles/element.scss" as *;`,
            },
        },
    },
    plugins: [
        vue(),
        // element-plus按需引入
        ElementPlus({
            // 引入的样式的类型，可以是css、sass、less等，
            useSource: true
        }),
        AutoImport({
            resolvers: [ElementPlusResolver({
            	// 使用预处理sass样式, 不写读不到样式文件
				importStyle: "sass",
            })],
        }),
        Components({
            resolvers: [ElementPlusResolver({
				// 使用预处理sass样式, 不写读不到样式文件            
				importStyle: "sass",
            })],
        })
    ]
})
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

2. Vue3

2.1 setup 语法糖

vue3 中 script 标签中的setup 是什么意思

<script lang="ts" setup>
</script>
1
2

解决：

实际上是一种语法糖

使用前：

<script lang="ts">
import axios from "axios";
export default {
    setup() {
           // 初始化状态和衍生值
        const state: any = reactive({
            form: {
                username: "",Ï
                password: "",
            },
            lowerCaseUsername: computed(() =>
                state.form.username.toLowerCase()
            ),
        });
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用后：

<script lang="ts" setup>
import axios from "axios";
const state: any = reactive({
    form: {
        username: "",
        password: "",
    },
    lowerCaseUsername: computed(() => state.form.username.toLowerCase()),
});
</script>
1
2
3
4
5
6
7
8
9
10

注：vscode 中的 volar插件 带有vue3模板提示，强烈建议使用。

3. Tailwindcss

3.1 项目引入

// 1. 使用的是像 React 或 Vue 这样的 JavaScript 框架
// 例： src/main.ts
import "tailwindcss/tailwind.css"

// 2.使用 @tailwind 指令注入 Tailwind 的基础 (base)
// 例：src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// 3.使用的是 postcss-import（或背后使用它的工具，例如 Webpacker for Rails），请使用我们的导入而不是 @tailwind 指令来避免在导入任何其他文件时出现问题
// 例：src/index.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.2 自定义颜色变量用于与element-plus的主题色同步

// tailwind.config.js
module.exports = {
    purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
    //配置 Tailwind 来移除生产环境下没有使用到的样式声明
    //在您的 tailwind.config.js 文件中，配置 purge 选项指定所有的 pages 和 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            colors: {
            	// 使用element-plus的颜色变量
                primary: 'var(--el-color-primary)',
            },
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
    important: true,
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20