uView系列——使用教程

一、下载安装包

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

uView2.0

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

uView系列——使用教程_第1张图片

 uView系列——使用教程_第2张图片

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

二、配置uView

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

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

uView系列——使用教程_第3张图片

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

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

 uView系列——使用教程_第4张图片

uView系列——使用教程_第5张图片

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

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

uView系列——使用教程_第6张图片

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

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

uView系列——使用教程_第7张图片

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

三、测试

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

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

		

uView

Home图标 HomeButton

uView系列——使用教程_第8张图片

 效果展示如下:

uView系列——使用教程_第9张图片

你可能感兴趣的:(uView,vue.js,前端,javascript)