呃,我这边用的安装方式是下载安装包在导入到项目中,建议开发软件使用HBuilder X开发工具,简单介绍一下这款工具,uni-app 是工具框架,它制定了很多通用的标准和 Api,帮助我们把编写的代码发布到多个平台,它并不是 UI 框架。而今天要介绍的 uView UI 不仅仅是 web 应用界面的 UI 组件库,它专为 uni-app 而生,能够在App、H5、各家小程序平台中完美一致地运行,目标是成为 uni-app 生态最优秀的UI框架。我觉得目前它做到了。。。。后面省略无数字,不逼逼了,以下是操作:
先到uView官网找到安装选项里面的这是网址
当然你也可以不用去官网找了,我这边给你链接网址了
https://ext.dcloud.net.cn/plugin?id=1593
会进入这个插件市场,找到这个下载插件压缩包下载下来
然后解压这个压缩包,解压出来是有三个文件,一个uview-ui文件夹和2个json文本,把uview-ui文件放到和你项目的pages文件夹的同级
然后再pages.json中把下面这段代码放置到这个位置中
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
在main.js中把以下代码引入
import uView from "uview-ui";
Vue.use(uView);
还需要在app.vue导入一个公共的uwiew样式
<style lang="scss">
@import "uview-ui/index.scss";
/*每个页面公共css */
</style>
在uni.scss中引入uwiew样式
/* uni.scss */
@import 'uview-ui/theme.scss';
最后一步啦,关闭微信开发者工具和HBuilder X开发工具后重新打开项目运行测试一下
这里我用了uView的轮播图测试
代码如下:
<view class="wrap">
<u-swiper :list="slider" name="picUrl"></u-swiper>
</view>
js代码
slider: [{
id: 1,
picUrl: require('../../static/timg1.jpg')
},
{
id: 2,
picUrl: require('../../static/timg2.jpg')
},
{
id: 3,
picUrl: require('../../static/timg3.jpg')
},
{
id: 4,
picUrl: require('../../static/timg4.jpg')
},
],
下面一张图是运行出来的效果图
这样就完成安装了,可以去体验uView组件库的功能啦,今天就介绍到这啦