在uni-app项目中引入uView组件库
其实uView的官方文档写的很清楚了,但是作为菜鸟踩过坑的我还是记录一下。
什么是uView
uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)
下载
// 如果您的根目录没有package.json文件的话,请先执行如下命令:
// npm init -y
npm install uview-ui@2.0.31
// 更新
// npm update uview-ui
项目中引入
main.js
引入uView库
// main.js
import uView from 'uview-ui';
Vue.use(uView);
App.vue
引入基础样式(注意style标签需声明scss属性支持)
/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
uni.scss
引入全局scss变量文件
/* uni.scss */
@import "uview-ui/theme.scss";
pages.json
配置easycom规则(按需引入)
// pages.json
{
"easycom": {
// npm安装的方式不需要前面的"@/",下载安装的方式需要"@/"
// npm安装方式
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
// 下载安装方式
// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
按照以上步骤配置完成之后,就可以直接在uni项目中使用这些组件了,无需import
引入
如下:
<template>
<view style="padding: 20px;">
<u-button type="primary" text="确定"></u-button>
<u-button type="primary" icon="map" text="图标按钮"></u-button>
<u-button type="primary" size="small" text="大小尺寸"></u-button>
</view>
</template>