uniapp如何快速引用uview-ul，uni-app中引入和使用uViewUI

关于uView的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，同时view组件是uni-app中 最基础，最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它们表示感谢。

话不多说直接上，非常简单

首先我们创建一个csdn项目

大概目录是这样

然后我们将uview-ui放入一级目录下，如果大家没有的话可以去官网下载，我这里给大家提供一个我自己上传的

uview2完整资源，uniapp组件框架-互联网文档类资源-CSDN下载

 

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

//找到 main.js

import uView from "uview-ui";
Vue.use(uView);

3，在引入uView的全局SCSS主题文件
引入位置在项目根目录的uni.scss中引入此文件。

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

4，引入uView基础样式

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

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

 

 5,pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

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

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

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