vue3+ts+vite+UnoCSS系列（二）

近日见闻

NanUI 作者在国庆节发布了停更公告，称该项目将暂停开发，原因是去年被裁员失业后，他已转行销售钢材，现在很难腾出时间来开发和维护 NanUI 项目。这还能说什么呢，活着要紧！--https://github.com/XuanchenLin/NanUI/discussions/367
2023年10月28日，第一届「稀土掘金创新论坛」和您相约北京，以「AI时代下的管理变革」为主题。--掘金社区
最近巴以冲突，这个伤亡，咱老百姓还是祈祷世界和平吧！

elmentplus-unplugin 自动导入

Element Plus 官方文档中推荐按需自动导入的方式，需要使用额外的插件 unplugin-auto-import 和 unplugin-vue-components 来导入要使用的组件。

代码语言：javascript复制

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


import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";

plugins: [
  AutoImport({
    // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
    imports: ["vue"],
    eslintrc: {
      enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false 
      filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件
    },
    dts: path.resolve(pathSrc, "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径
  }),
  Components({
    dts: path.resolve(pathSrc, "components.d.ts"), // 指定自动导入组件TS类型声明文件路径
  }),
]

UnoCSS 使用

安装：

pnpm add -D unocss

安装插件：

代码语言：javascript复制

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

创建一个uno.config.ts

代码语言：javascript复制

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

添加 virtual:uno.css 到你的 main 入口:

代码语言：javascript复制

// main.ts
import 'virtual:uno.css'

就可以愉快的使用UnoCSS了，可以在沙盒中试用：

https://stackblitz.com/fork/github/unocss/unocss/tree/main/examples/vite-vue3

vite vue3 插件函数开发

0 人点赞