uni-app 安装和使用“u-view(uView)”UI框架
v-view官网:https://www.uviewui.com/本篇文章不采用npm安装。一、下载u-view相关源码。下载地址:https://ext.dcloud.net.cn/plugin?id=1593解压后,将里面的所有内容全部复制到自己的项目根目录中,二、引入相关依赖。1.首先在main.js,引入并使用uView的JS库。// main.jsimport uView from "u
·
v-view官网:uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
本篇文章不采用npm安装。
一、下载u-view相关源码。
下载地址:uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场
解压后,将里面的所有内容全部复制到自己的项目根目录中,
二、引入相关依赖。
1.首先在main.js,引入并使用uView的JS库。
// main.js
import uView from "uview-ui";
Vue.use(uView);
2.在项目根目录的uni.scss
中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
3.在app.vue文件中,引入uView的基本样式。
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
注意:如果这里style标签后面没有lang="scss",记住要添加上。
4.最后在项目根目录的pages.json,添加如下代码。
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}
效果图:
// pages.json { "easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" }, // 此为本身已有的内容 "pages": [ // ...... ] }
三、使用。
随便拷贝官网的一个组件,此时v-view组件已经全局引入了,所以可以在任意页面使用,下面我们来测试一下按钮组件。
拷贝按钮组件源码:
<u-button type="warning">警告按钮</u-button>
效果图:
更多推荐
已为社区贡献25条内容
所有评论(0)