使用Uniapp安装uview-plus

151 阅读1分钟

1.在uniapp的插件中安装uview-plus和sass

image.png

2.引入uview-plus主JS库

在项目根目录中的main.js中,引入并使用uview-plus的JS库,注意这两行要放在const app = createSSRApp(App)之后。

// main.js
import uviewPlus from '@/uni_modules/uview-plus'

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

3.在项目根目录的uni.scss中引入此文件。

@import '@/uni_modules/uview-plus/theme.scss';

4.引入uview-plus基础样式

/* 注意要写在第一行,注意不能引入至uni.scss,同时给style标签加入lang="scss"属性 */ @import "@/uni_modules/uview-plus/index.scss";
/* 注意要写在第一行,注意不能引入至uni.scss,同时给style标签加入lang="scss"属性 */ @import "@/uni_modules/uview-plus/index.scss";

<style lang="scss">

/* 注意要写在第一行,注意不能引入至uni.scss,同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-plus/index.scss";
</style>

5.uview-plus3.x配置 (注意,这一步很多人粗心大意漏了)

"easycom": {
		"autoscan": true,
		// 注意一定要放在custom里,否则无效,https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
	    "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
		}
	},