最近使用uni-app,发现uViewUI这个UI库挺好用的,这里记录一下。
-
安装:npm安装(个人向)
// 如果您的项目是HX创建的,根目录又没有package.json文件的话,请先执行如下命令: // npm init -y // 安装 npm install uview-ui // 更新 npm update uview-ui
-
配置
这里提一嘴啊,这个库必须用scss,如果是HBuilder X
创建的,可以去插件市场安装一个。用脚手架的话,各位大佬应该都会,我就不多bb了。
1. 在main.js
中,引入并使用uView的JS库
注意这两行要放在import Vue
之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
2.根目录的uni.scss
中引入uView的全局SCSS主题文件
/* uni.scss */
@import 'uview-ui/theme.scss';
3.在App.vue里面,style标签里添加基础样式
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
4. 项目根目录的pages.json
中配置easycom组件模式
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
到这里你就可以直接使用了。