uView框架

文章描述:

uViewUI是uni-app生态最优秀的框架,全面的组件让您信手拈来,如鱼得水,赶快来试试吧!

准备工作

HBuilderX

开发工具下载
https://www.dcloud.io/

选择开发版本

 

uView官网:https://www.uviewui.com/

配置步骤

https://www.uviewui.com/components/downloadSetting.html

 

 

下载

网址:https://ext.dcloud.net.cn/plugin?id=1593

这里使用的是1.8.6版本的

 

可以使用npm安装

检查根目录是否有package.json文件,如果没有就使用命令新建:

npm init -y

 

// 安装
npm install uview-ui@1.x

 

 

文档

1.8

组件:https://v1.uviewui.com/components/intro.html

个人中心:https://v1.uviewui.com/layout/wxCenter.html

2.0

组件:https://www.uviewui.com/

 

下载完成并解压重命名uview-ui放到自己项目根目录下面

配置

一、main.js

import App from './App'

下面添加

import uView from 'uview-ui'
Vue.use(uView)

二、uni.scss

/* 文章场景相关 */

末尾添加

@import 'uview-ui/theme.scss';

三、App.vue

<style lang="scss">
/* 每个页面公共css */
@import "uview-ui/index.scss";
</style>

四、pages.json

// 如果您是通过uni_modules形式引入uView,可以忽略此配置
"easycom": {
	"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},

最后点击重新运行

 

<u-button >默认按钮</u-button>
<u-button type="primary">主要按钮</u-button>
<u-button type="success">成功按钮</u-button>
<u-button type="info">信息按钮</u-button>
<u-button type="warning">警告按钮</u-button>
<u-button type="error">危险按钮</u-button>

 

发布时间:2022/05/06

发表评论