uniapp vue3安装 uview-plus3+
1.安装依赖
pnpm install uview-plus
注:依赖安装完成后需要重新启动项目才会起作用
2.在main.ts引入uview
import { createSSRApp } from "vue";
import App from "./App.vue";
import uViewPlus from 'uview-plus';export function createApp() {const app = createSSRApp(App);app.use(uViewPlus);return {app,};
}
注意:上面这个地方引入uview-plus会提示有错误,需要看第三步,修改env.d.ts文件
3.修改env.d.ts文件
/// <reference types="vite/client" />declare module '*.vue' {import { DefineComponent } from 'vue'// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>export default component
}
declare module "uview-plus"
4.uni.scss引入主题样式
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件*/
/* uni.scss */
@import 'uview-plus/theme.scss';
5.App.vue引入样式
<style lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "uview-plus/index.scss";
</style>
6.page.json配置全局组件模式
// 组件自动导入"easycom": {"autoscan": true,"custom": {// uni-ui 规则如下配置 // [!code ++]"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" ,// [!code ++]// uview-plus 规则如下"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"}},
全局引入组件,不用每个文件都使用import导入了。