uView系列——使用教程

简介: 使用教程

一、下载安装包

可以通过以下链接快速访问

uView2.0

如果使用HBuilderX编辑器的可以直接点击第一种方式自动安装即可

8d4aedd016dd43f3a45d61dce936134c.png

79823e0923b04ca88d65e175005db554.png

如果是下载到桌面的可以根据上图选择文件所存放的位置

二、配置uView

1、首先在main.js中全局引入uView依赖

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

15de309008ed4bafa5c780c27fc673c1.png

2、在uni.scss中末尾处引入依赖

@import "./uni_modules/uview-ui/theme.scss";

af9e90f4ddea4275b4bd23e675ca1924.png38e21d7cb2084247b83a52f80759ba60.png

3、在App.vue的样式选择器中引入依赖

@import 'uni_modules/uview-ui/index.scss'

8e27400c8aa747a98a1df99568fbd94e.png

4、page.json里面引入对应的依赖

"easycom": {
    "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
  },

1d53e5dff39345a8b8af47839b598f34.png

配置到这一步就已经算是完成了。

三、测试

接下来就可以进行测试了。

我们可以选择index下的index.vue 进行测试,把多余图片文字的部分删除配置成uview的标签

<h1>uView</h1>
  <view class="text-area">
    <u-icon name="home"></u-icon>
    <text>Home图标</text>
  </view>
  <view style="text-align: center;color: #366092;">
    <u-button type="primary" icon="home">HomeButton</u-button>
  </view>
  <view>
    <u-loading-icon text="加载" textSize="15"></u-loading-icon>
  </view>

399c86a79a2e4d7dbef27c84820957d5.png

效果展示如下:

ef21d3d3ebe1418fbc985a09f4605017.png

相关文章
|
8月前
|
JavaScript
uView快速上手
uView快速上手
54 1
|
8月前
uView安装
uView安装
68 0
|
8月前
|
存储 JavaScript 前端开发
Vue3 详细教程及实例(完整版)
Vue3 详细教程及实例(完整版)
439 0
手把手教你将uView UI配置到uniapp项目中
手把手教你将uView UI配置到uniapp项目中
1465 0
手把手教你将uView UI配置到uniapp项目中
|
5月前
|
JavaScript
tailwindcss使用教程
【8月更文挑战第1天】
64 3
|
8月前
|
JavaScript 算法 数据可视化
antv/g6使用教程及图配置
antv/g6使用教程及图配置
1803 0
|
小程序 开发工具 开发者
小程序使用 组件库 vant-weapp详细教程
小程序使用 组件库 vant-weapp详细教程
214 0
|
JavaScript
Vue富文本编辑器使用教程
Vue富文本编辑器使用教程
253 0
|
JavaScript
Vue整合ElementUI,组件使用教程,适合新手(三)
Vue整合ElementUI,组件使用教程,适合新手
309 0
Vue整合ElementUI,组件使用教程,适合新手(三)
|
JavaScript 容器
Vue整合ElementUI,组件使用教程,适合新手(二)
Vue整合ElementUI,组件使用教程,适合新手
375 0
Vue整合ElementUI,组件使用教程,适合新手(二)