如何在uniapp中使用uview

uview官网

www.uviewui.com/components/…

引入

想要在uniapp中使用uview是有两种方法是可行的分别是：npm安装，就是按照官网给的方法去配置；

二那，就是使用uni插件库中的插件来使用

npm安装

安装

我们在配置前需要进行安装：

安装相关依赖

npm install uview-ui

//指定版本
npm install uview-ui@2.0.31

我们的uview是依赖scss,框架内是必须要有，否则的话正常运行:

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

配置文件引入

接着我们在main.js里面引入：

// main.js，注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
//格式的一个转换，有需要可以加上
uni.$u.config.unit = 'rpx'

uni.scss引入全局scss样式文件

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

App.vue引入基本样式

注：必须实在App.vue中style的第一行，还要加上lang=“scss”

<style lang="scss">
/* App.vue */
@import 'uview-ui/index.scss';
</style>

配置easycom组件模式

此配置需要在项目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": [
		// ......
	]
}

Cli模式额外配置

找到根目录的vue.config.js文件，在里面加上：

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

插件库的引入

uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场

进入插件库，选择使用HBuilderX导入插件

查看是否存在scss插件

样式

同样是引入全局主题文件以及基本样式，差别在于npm安装的uview-ui存在于node_modules文件夹中, 插件引入的是在uni_modules文件夹中.