更多的请查看官方文档uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)
// 如果您的根目录没有package.json文件的话,请先执行如下命令:
// npm init -y
安装 npm install uview-ui@2.0.36
// 更新
// npm update uview-ui
// 通过`console.log`打印的形式
console.log(uni.$u.config.v);
// 可以查阅uView的配置文件得知当前版本号,具体位置为:
/uview-ui/libs/config/config.js
// main.js,注意要在use方法之后执行
将这一段放在 import App from './App'的下边Vue.config.productionTip = false的上边
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
uni.$u.config.unit = 'rpx'
放在main.js的最下边
// 调用setConfig方法,方法内部会进行对象属性深度合并,可以放心嵌套配置
// 需要在Vue.use(uView)之后执行
uni.$u.setConfig({
// 修改$u.config对象的属性
config: {
// 修改默认单位为rpx,相当于执行 uni.$u.config.unit = 'rpx'
unit: 'rpx'
},
// 修改$u.props对象的属性
props: {
// 修改radio组件的size参数的默认值,相当于执行 uni.$u.props.radio.size = 30
radio: {
size: 15
}
// 其他组件属性配置
// ......
}
})
// 安装sass
npm i sass -D
// 如果您的项目是HX创建的,根目录又没有package.json文件的话,请先执行如下命令:
// npm init -y
// 安装
npm install uview-ui@2.0.36
在项目src
目录中的main.js
中,引入并使用uView的JS库,注意这两行要放在import Vue
之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
在引入uView的全局SCSS主题文件
在项目src
目录的uni.scss
中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
引入uView基础样式
注意!
在App.vue
中首行的位置引入,注意给style标签加入lang="scss"属性
<style lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "uview-ui/index.scss";
</style>
配置easycom组件模式
此配置需要在项目src
目录的pages.json
中进行。
温馨提示
- uni-app为了调试性能的原因,修改
easycom
规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。 - 请确保您的
pages.json
中只有一个easycom
字段,否则请自行合并多个引入规则。
// pages.json
{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// ......]
}
一个流程下来引入组件就可以使用了。