uni-app引入uView2.0的步骤

引入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

第二步:在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"
},

如果有帮助,请劳驾点个赞

  • 12
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值