--- theme: smartblue --- # 前言在当今快速发展的移动互联网时代，跨平台应用开发已成为众多开发者追求的目标。而**uni-app**作为一款基于Vue.js框架的跨平台应用开发解决方案，凭借其简洁、高效的特点，吸引了越来越多的开发者关注。然而，仅仅掌握uni-app的基本技能并不足以应对日益复杂的项目需求。为了提高开发效率、降低开发难度，插件应运而生。本文将为您推荐在使用 **Vite** 构建的uni-app项目中使用的插件，小编这里使用的是vscode开发，希望通过本文的学习，您能够更好地利用插件提升uni-app开发体验，打造出更加优秀的跨平台应用。 # 常用推荐 ## unplugin-auto-import 按需自动导入API，适用于Vite、Webpack、Rspack、Rollup和esbuild。支持TypeScript。由unplugin提供支持。 ### 没有使用插件 ``` import { computed, ref } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2) ``` ### 使用插件后 ``` const count = ref(0) const doubled = computed(() => count.value * 2) ``` ### 具体实现安装插件 ```js npm i -D unplugin-auto-import ``` 然后找到 **vite.config.ts** 复制粘贴以下代码即可 ```vite.config.ts import { defineConfig } from "vite"; import AutoImport from "unplugin-auto-import/vite"; export default defineConfig({ plugins: [ //自动引入vue和uni-app的api AutoImport({ imports: ["vue", "uni-app"], // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts' dts: "src/auto-import.d.ts", // 自动生成'eslintrc-auto-import.json'文件，在'.eslintrc.cjs'的'extends'中引入解决报错 eslintrc: { enabled: true, }, }) ] }); ``` ## [UnoCSS](https://alfred-skyblue.github.io/unocss-docs-cn/) **UnoCSS** 是一个即时的原子化 CSS 引擎，旨在灵活和可扩展。核心是不拘一格的，所有的 CSS 工具类都是通过预设提供的。 ### 安装依赖 ```js npm install -D unocss@0.53.6 unocss-preset-weapp ``` ### 创建unocss.config.ts 有关unocss的配置，大家具体可以去官方查看 [配置文件](https://alfred-skyblue.github.io/unocss-docs-cn/guide/config-file) 在根目录下创建`unocss.config.ts`可以配置unocss相关，在配置中增加前缀uno-防止与tmui等自带的类名冲突，配置文件如下 ```ts import presetWeapp from "unocss-preset-weapp"; import { extractorAttributify, transformerClass, } from "unocss-preset-weapp/transformer"; import { defineConfig } from "unocss"; // 可以写属性会自动增加class,也可以写class const prefix = "uno-"; const { presetWeappAttributify, transformerAttributify } = extractorAttributify( { classPrefix: prefix } ); export default defineConfig({ presets: [ presetWeapp({ prefix }), presetWeappAttributify(), ], shortcuts: [ { "uno-center": "uno-flex uno-justify-center uno-items-center", }, ], transformers: [ transformerAttributify(), transformerClass(), ], }); ``` ### 使用官方提供了交互式文档 [UnoCSS Interactive Docs](https://unocss.dev/interactive/)，初学者可以前去查阅相关命名方法 ```vue ``` 以上代码的效果如图 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db7cb5f8ea634e1cb33cb871df58b1ea~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=561&h=325&s=15366&e=png&b=eff0f6) ## [Ano UI](https://ano-ui.vercel.app/) Ano UI 一个基于 Vue.js 的 [UnoCSS](https://github.com/unocss/unocss) UI 库，允许你制作漂亮的小程序。它包括一整套预构建组件，开箱即可用于生产。 ### 安装 ```js npm install ano-ui npm install -D unocss@0.53.6 @iconify-json/tabler unocss-applet ``` ### 配置还是在unocss.config.ts中配置，没有这个文件的先创建，再将以下代码复制粘贴上去这里是**默认**安装配置过了unocss，所以此配置文件是在此基础上增加 **ano-ui配置项** ```ts import presetWeapp from "unocss-preset-weapp"; import { extractorAttributify, transformerClass, } from "unocss-preset-weapp/transformer"; import { defineConfig, presetIcons } from "unocss"; import { presetApplet, presetRemRpx, transformerApplet } from "unocss-applet"; import { presetAno } from "ano-ui"; // 可以写属性会自动增加class,也可以写class const prefix = "uno-"; const { presetWeappAttributify, transformerAttributify } = extractorAttributify( { classPrefix: prefix } ); export default defineConfig({ presets: [ presetWeapp({ prefix }), presetWeappAttributify(), //以下是ano-ui配置 presetApplet(), presetRemRpx(), presetIcons({ scale: 1.2, extraProperties: { display: "inline-block", "vertical-align": "middle", }, }), presetAno(), ], shortcuts: [ { "uno-center": "uno-flex uno-justify-center uno-items-center", }, ], transformers: [ transformerAttributify(), transformerClass(), // ano-ui配置 transformerApplet(), ], }); ``` ### 使用你可以前往官方的组件库文档查阅你所想要的组件使用方式 [点击前往](https://ano-ui.vercel.app/components/basic/avatar.html) **以头像组件(Avatar)为例** ```vue ``` **效果如下** ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7b76ed6d0c64f1684c8cdbd6b4a6ff9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=570&h=241&s=29149&e=png&b=eeeff5) ## [uCharts](https://www.ucharts.cn/v2/#/) **uCharts** 是一款基于 **canvas API** 开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东/360）、快应用等更多支持 canvas API 的平台。 ### 安装 #### ① 下载ucharts 拉取ucharts ``` git clone https://gitee.com/uCharts/uCharts.git ``` 你还可以访问官网 [下载](https://www.ucharts.cn/v2/#/dwonload/index)，或者点击[此链接下载](https://gitee.com/uCharts/uCharts) #### ② 复制到自己项目找到 **qiun-data-charts(非uni_modules)** 这个路径下（注：由于我使用的是vscode开发，所以我这里选择的是非uni_modules版本） ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3bf05d042bc41b385a2e41665a8b329~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1199&h=530&s=70914&e=png&b=ffffff) 打开该项目 **components** 目录，做以下操作 1. 复制该目录下 **static** 文件夹到自己项目的 **static** 目录中 2. 将该目录其他文件直接原样复制到您项目中的 **components** 目录（其中test-charts文件夹可删除） #### ③ easycome配置找到 **page.json** 文件，添加easycome配置项 ```json "easycom": { "autoscan": true, "custom": { "^qiun-(.*)": "@/components/qiun-$1.vue" } }, ``` ### 使用官方提供了许多现成的图表，大家可以自行前往调试使用（附：[链接](https://www.ucharts.cn/v2/#/demo/index)）这里使用官方的案例，代码如下： ```vue ``` 效果如图: ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dcb5285a47c747bfbfb4db13f605c049~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=566&h=678&s=112406&e=png&b=eeeff5) ## [uview-plus 3.0 ](https://uiadmin.net/uview-plus/) uview-plus，是全面兼容nvue的uni-app生态框架，适用于vue3的小程序组件 ### 下载 ``` npm install uview-plus npm i sass -D // 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错 npm i sass-loader@10 -D ``` ### 配置在项目 **src** 目录中的 **main.js** 中，引入并使用uview-plus的JS库，注意这两行要放在 **const app = createSSRApp(App)** 之后。 **主文件引入** ```main.js // main.js import uviewPlus from 'uview-plus' import { createSSRApp } from 'vue' export function createApp() { const app = createSSRApp(App) app.use(uviewPlus) return { app } } ``` **App.vue引入uview-plus基础样式** ``` App.vue /* uni.scss */ @import 'uview-plus/theme.scss'; ``` (在 **App.vue** 中 **首行** 的位置引入，注意给style标签加入lang="scss"属性) **配置easycom组件模式** ```json // pages.json { "easycom": { // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175 "custom": { "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue", "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue", "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue" } }, // 此为本身已有的内容 "pages": [ // ...... ] } ``` # 总结本文为您推荐了一些实用的uni-app插件，并提供了详细的安装和使用教程。通过合理地使用这些插件，您可以大大提高uni-app开发效率，降低开发难度。希望本文的学习能够帮助您更好地利用插件提升uni-app开发体验，打造出更加优秀的跨平台应用。本文若有错误的地方，欢迎大家来互相交流鸭~