admin管理员组文章数量:1600458
uviewUI
uni-app2018年初发布以来，一直蓬勃发展，一派欣欣向荣，社区也是人声鼎沸，众望所归。
因此，uView应运而生，uView的目标是成为uni-app生态最优秀的UI框架。
- 接下来将介绍uview如何配置到uniapp项目中
如果你想了解到更详细的文档，进入uview官网查看
接下来将为你带来几种方式的图文教程
使用安装包（这里就不讲解npm方式安装了）
npm安装教程请阅读本篇教程的姊妹篇《uni-app uView UI框架 npm安装教程》。
首先要去官网下载最新的包 下载地址
点击之后进入插件市场，选择右边下载插件ZIP
接下来我们使用HBuilderX创建一个uniapp的项目
创建完成之后，我们将刚刚下载的包解压，内部有一个uView-ui的文件夹，直接复制到项目的根目录下。
因为uview的使用的是scss，所以我们需要使用HBuilderX安装scss的插件。
点击工具，插件安装，找到 scss/sass编译 点击右方的安装
对HBuilderX的配置就结束了，接下来要对项目进行设置。（分为4步）
一、引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库， 注意这两行要放在import Vue之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
二、在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
三、引入uView基础样式
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
四、配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
// pages.json
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
到此处，我们已经将uview配置好了，接下来写个示例验证一下
使用表格组件来演示一下
没有任何问题，至此，我们已经成功配置完uview啦！如果觉得我们uView框架还不错的话，麻烦在插件市场给个5星好评哦。
版权声明：本文标题：uni-app uView UI框架 下载安装教程 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728352688a1155294.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论