uniapp中使用uView UI组件库 - Vue2

---

温馨提示

---

uView UI组件库截止2.0.36版本还不支持Vue3！！！

一、创建项目(Vue2+js)

---

打开HB–>文件–>新建项目:

一个基础项目创建完成：

二、安装uView

---

2.1 安装sass与sass-loader

提示：uView依赖SCSS，所以须要安装SCSS插件，否则无法正常运行。

// 安装sass
npm i sass -D

// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

//或者（推荐）
yarn add sass
yarn add sass-loader

2.2 安装uView

yarn add uview-ui

2.3 配置步骤

2.1 引入uView主JS库

---

在项目src目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'

// UI库插件uView
import uView from "uview-ui";
Vue.use(uView);
// 因为uView改回使用px为默认单位，如此配置即可改为rpx
uni.$u.config.unit = 'rpx'

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    
    
	...App
})
app.$mount()

// #endif


//以下代码忽略
// #ifdef VUE3
import {
    
    
	createSSRApp
} from 'vue'
export function createApp() {
    
    
	const app = createSSRApp(App)
	return {
    
    
		app
	}
}
// #endif

2.2 在引入uView的全局SCSS主题文件

---

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

/* uni.scss */
@import 'uview-ui/theme.scss';

2.3 引入uView基础样式

---

注意:在 App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/*每个页面公共css */
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

2.4 配置easycom组件模式

---

此配置需要在项目src目录的pages.json中进行。

温馨提示

1. uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，需要重启HX或者重新编译项目才能正常使用uView的功能。
2. 确保你的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

// pages.json
{
    
    
	"easycom": {
    
    
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

2.5 Cli模式额外配置

---

如果您是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置：

// vue.config.js，如没有此文件则手动创建
module.exports = {
    
    
    transpileDependencies: ['uview-ui']
}

三、效果展示

---

记住！！！是Vue2！！！

<template>
	<view>
		<u-button type="primary" text="确定"></u-button>
		<u-button type="primary" :plain="true" text="镂空"></u-button>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
      
				title: 'Hello'
			}
		},
		onLoad() {
      
      

		},
		methods: {
      
      

		}
	}
</script>

<style>
	
</style>