热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

uniapp引入uview基于最新HBuilderX3.3基于uni_modules

1.创建uni-app项目2.导入插件https:ext.dcloud.net.cnplugin?id15933.main.js引入uView库引入全局uViewimportuV

1. 创建uni-app项目

在这里插入图片描述


2.导入插件

在这里插入图片描述

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

3.main.js引入uView库

在这里插入图片描述

// 引入全局uView
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

4.App.vue引入基础样式(注意style标签需声明scss属性支持)

在这里插入图片描述

<style lang&#61;"scss">/*每个页面公共css */&#64;import "&#64;/uni_modules/uview-ui/index.scss";
style>

5.uni.scss引入全局scss变量文件

在这里插入图片描述

&#64;import &#39;&#64;/uni_modules/uview-ui/theme.scss&#39;;

6.pages.json配置easycom规则(按需引入)


需要重启下HBuilder 才能生效easycom,卡了我好久
在这里插入图片描述


"easycom": {// npm安装的方式不需要前面的"&#64;/"&#xff0c;下载安装的方式需要"&#64;/"// npm安装方式// "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"// 下载安装方式"^u-(.*)": "&#64;/uni_modules/uview-ui/components/u-$1/u-$1.vue"},

7.添加一个按钮试试

在这里插入图片描述

<u-buttontext&#61;"成功按钮"size&#61;"normal"type&#61;"success">u-button>

8.运行看效果

在这里插入图片描述
在这里插入图片描述


推荐阅读
author-avatar
mobiledu2502927333
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有