引入uVIew组件可以使用uni-app市场插件安装插件即可,也可以使用npm下载安装,不过使用npm需要在pages.json使用easycom属性引用需要的组件类。

在uni-app插件市场右上角选择使用HBuilder X 导入插件或者下载插件ZIP
如果您的项目是由HBuilder X创建的标准uni-app项目,将下载后的uview-ui文件夹,复制到项目根目录。
如果您的项目是由vue-cli (opens new window)模式创建的, 请将下载后的uview-ui文件夹放到项目的src文件夹中即可。

一、使用uni-app市场插件安装

途径一:uView示例项目已内置到HBuilder X中,在文件 -> 新建 -> 项目 -> uni-app中,找到uView UI下载运行即可。

途径二:在uni-app插件市场右上角选择使用 HBuilderX 导入示例项目或者下载示例项目ZIP,然后在HBuilder X中运行即可。

uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=6682

二、使用npm安装

第一步:在uni-app新建的项目中 使用CMD下载uView
npm install uview-ui@2.0.31

第二步:在main.js里引入和注册uView 这两句代码需要在import Vue之后
import uView from '@/node_modules/uview-ui' Vue.use(uView)

第三步:在uni.scss文件中引入uView的全局Scss主题文件
@import '@/node_modules/uview-ui/theme.scss';

第四步:在App.vue文件中引入全局共用的scss文件
<style lang="scss"> @import "@/node_modules/uview-ui/index.scss"; </style>
第五步:在pages.json中配置uview组件
"easycom": { "^u-(.*)": "@/node_modules/uview-ui/components/u-$1/u-$1.vue" },
第六步:在index.vue页面进行测试
<u-button text="月落"></u-button>

原文地址:http://www.cnblogs.com/lzp110119/p/16931098.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性