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-types
  const 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 规则如下
		  "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
		  "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
	    }
	},

全局引入组件，不用每个文件都使用import导入了。