uniapp引入uView2.x并使用

uView官网：介绍 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

目录

一、Hbuilder X方式

二、npm方式

一、Hbuilder X方式

 根据uView官方文档说明，使用Hbuilder X开发，可直接在插件市场以uni_modules形式安装

注意：必须安装SCSS插件（Hbuilder X菜单的工具->插件安装中找到"scss/sass编译"插件安装）

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

①导入uView插件

②检查是否安装scss插件

③配置工作

1、在根目录的main.js中，引入uView的JS库，代码需要放在import Vue后

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

2、根目录的uni.scss中，引入uView的全局SCSS主题文件

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

3、在App.vue中style标签首行，引入uView基础样式，需要给style标签加 lang = "scss" 属性

<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

 ④（uni_modules引入方式可忽略此配置）在pages.json配置easycom组件模式（配置完成后需重启HX或者重新编译项目）

配置easycom组件的作用：组件库按需引用，打包时自动剔除没用使用的组件

"easycom": {
	"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},

⑤使用

二、npm方式

①npm安装uview插件（如果根目录没有package.json文件的话，先执行以下指令初始化）

npm init -y

// 更新
// npm update uview-ui

 ②检查是否安装scss插件

// 安装node-sass
npm i node-sass -D

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

③配置工作

1、在根目录的main.js中，引入uView的JS库，代码需要放在import Vue后

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

2、根目录的uni.scss中，引入uView的全局SCSS主题文件

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

3、在App.vue中style标签首行，引入uView基础样式，需要给style标签加 lang = "scss" 属性

<style lang="scss">
	/*每个页面公共css */
	@import "uview-ui/index.scss";
</style>

④在pages.json配置easycom组件模式（组件库按需引用，打包时自动剔除没有使用的组件）

"easycom": {
	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},

⑤cli模式额外配置（vue-cli项目需要在根目录的vue.config.js中添加如下配置）

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

⑥使用