乐趣区

关于前端:在-uniapp-项目上使用-uView-UI框架

jiezi

在 uniapp 我的项目上应用 uView UI 框架

前言(废话) —- 不看也行
刚工作不久, 公司间接给了一手新我的项目, 微信小程序的, 常常听到群里有小伙伴用这两套进行开发, 感觉很香, 所以决定我也用这一套整整
用 uniapp 创立 uniapp 容易, 后果援用 uView 的时候有点懵 … 决定整一手教程,
如果依照我的办法用不了的话, 麻烦揭示下我哈, 我更新或者删除, 防止前面小伙伴被我坑了 ….

注释开始

  1. 下载 uView 插件
    官网下载地址 👉 https://ext.dcloud.net.cn/plugin?id=1593
    1.1 点击 “ 下载插件 ZIP”
    1.2 将下载的压缩包解压的到其中 uview-ui 的文件夹并进行复制
    1.3 将 uviw-ui 文件夹复制到创立好的 uni-app 我的项目根目录下
  2. 在 uniapp 我的项目根目录下 main.js 文件 引入并应用 uView 库
// 引入并应用 uView 库
import uView from 'uview-ui';
Vue.use(uView);

  1. 在 uniapp 我的项目根目录下 App.vue 文件 引入根底款式

    <style lang="scss">
 // 引入 uview 根底款式
 @import "uview-ui/index.scss";
</style>

    留神: 这里用到了 scss, 须要 HBuild 有装置 sass/scss 编译插件, 否则编译时会报错, 装置办法我放最初头哈, 没装置的话记得装置一下子

  1. 在 uniapp 我的项目根目录下 uni.scss 文件 引入全局 scss 变量文件
/* uni.scss */
@import "uview-ui/theme.scss";

  1. 在 uniapp 我的项目根目录下 pages.json 文件 配置 easycom 规定

    "easycom": {"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},

    根底工作搞完了, 接下来应用一下爽一下

    uview 官网👉https://www.uviewui.com/components/intro.html

  • 右边列表有很多组件, 找到须要的, 或者喜爱的, 而后复制组件根本构造代码到我的项目中
    咱们来试试
    将下面那副图绿色框框圈起来的代码复制到咱们的我的项目中


看下成果, 其实在官网相应组件介绍右侧就能够看到成果了

对了, 组件介绍那边还有很多属性能够设置, 能够依照适宜现有我的项目需要进行配置批改(倡议应用每个组件之前浏览一下整组件的文档)

好了, 完事儿, 不懂得话能够问我哈

讲一下 sass/scss 编译插件在 HBuilder 下面怎么装置

1. 间接看图吧图片上有介绍哈

2. 进入插件官网后 第一个就是显示 sass 插件了, 间接点进去, 没有的话就搜寻一下

3. 点击应用 HBulider 装置插件, 跟着提醒关上返回 HBulider

4. 回到 HBulider 后会弹出是否装置插件. 当然时抉择是了哈哈哈, 右下角有装置提醒, 胜利后关上咱们 HBulier 装置插件面板确认下是否有装置胜利(没有的话就再试试..)

退出移动版