uni-app添加uview组件库
在跟目录的pages.json文件下粘贴入下:"easycom": {"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"},在main.js导入相关import uView from 'uview-ui';Vue.use(uView);在uni.css中/*** 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头
下载安装参考:https://uviewui.com/components/install.html
下载地址:https://ext.dcloud.net.cn/plugin?id=1593
使用下载的方式安装,能更方便阅读源码,但是每次升级都需要重新下载并覆盖uview-ui文件夹。
在uni-app插件市场右上角选择使用HBuilder X 导入插件或者下载插件ZIP
如果您的项目是由HBuilder X创建的标准uni-app项目,将下载后的uview-ui文件夹,复制到项目根目录。
如果您的项目是由vue-cli模式创建的, 请将下载后的uview-ui文件夹放到项目的src文件夹中即可。
注意: 此安装方式必须要按照下载方式安装的配置中的说明配置了才可用。
一、在跟目录的pages.json文件下粘贴入下:
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
由于uView使用easycom模式,让您无需引入组件即可直接使用,但是此功能需要Hbuilder X 2.5.5及以上版本才支持,详见配置easycom组件模式。 easycom打包的时候是按需引入的,您可以放心引入uView的整个组件库,发布打包时会自动剔除您没有使用的组件(注意:调试时仍然是全部引入的)
在main.js注入uviwe
import uView from 'uview-ui';
Vue.use(uView);
在uni.css中导入uview样式
/**
* 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头的自定义变量
* 使用的时候,请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
* uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用
*/
@import 'uview-ui/theme.scss';
在app.vue中全局导入样式。
<style lang="scss">
@import "uview-ui/index.scss";
uview的组件使用
<u-button type="primary">主要按钮</u-button>
<u-button type="success">成功按钮</u-button>
更多推荐
所有评论(0)