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
下载完成并解压重命名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
发表评论