uni-app 安装和使用“v-view”UI框架

2021-07-03 12:34:05 阅读：723 来源： 互联网

标签：scss ui app uview UI 根目录 uni uView view

v-view官网：https://www.uviewui.com/

本篇文章不采用npm安装。

解压后，将里面的所有内容全部复制到自己的项目根目录中，

二、引入相关依赖。

1.首先在main.js，引入并使用uView的JS库。

// main.js
import uView from "uview-ui";
Vue.use(uView);

2.在项目根目录的uni.scss中引入此文件。

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

3.在app.vue文件中，引入uView的基本样式。

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

注意：如果这里style标签后面没有lang="scss"，记住要添加上。

4.最后在项目根目录的pages.json，添加如下代码。

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

效果图：

// pages.json
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

三、使用。

随便拷贝官网的一个组件，此时v-view组件已经全局引入了，所以可以在任意页面使用，下面我们来测试一下按钮组件。

拷贝按钮组件源码：

<u-button type="warning">警告按钮</u-button>

效果图：

标签：scss,ui,app,uview,UI,根目录,uni,uView,view
来源： https://blog.csdn.net/qq_42740797/article/details/118438181

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

uni-app 安装和使用“v-view”UI框架

一、下载u-view相关源码。

二、引入相关依赖。

三、使用。