uniapp导入uView组件库

目录

准备工作

[1. 新建一个项目](#1. 新建一个项目)

[2. 导入uview组件库](#2. 导入uview组件库)

[3. 关于SCSS](#3. 关于SCSS)

配置步骤

[1. 引入uView主JS库](#1. 引入uView主JS库)

[2. 在引入uView的全局SCSS](#2. 在引入uView的全局SCSS)

[3. 引入uView基础样式](#3. 引入uView基础样式)

[4. 配置easycom组件模式](#4. 配置easycom组件模式)

添加效果实验运行即可成功


准备工作

1. 新建一个项目

2. 导入uview组件库

在进行配置之前,请确保您已经根据安装中的步骤对uView进行了下载安装,如果没有,请先下载安装

Hbuilder X方式

下载方式配置文档

如果您是使用Hbuilder X开发的用户,您可以在uni-app插件市场通过uni_modules的形式进行安装,此安装方式可以方便您后续在uni_modules对uView进行一键升级。

  • 在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件,导入到对应的项目中即可。

注意: 此安装方式必须要按照下载方式安装的配置中的说明配置了才可用。

下载地址:uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场

3. 关于SCSS

uView依赖SCSS,您必须要安装此插件,否则无法正常运行。

  • 如果您的项目是由HBuilder X创建的,相信已经安装scss插件,如果没有,请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装, 如不生效,重启HX即可

  • 如果您的项目是由vue-cli创建的,请通过以下命令安装对sass(scss)的支持,如果已安装,请略过。

    // 安装sass
    npm i sass -D

    // 安装sass-loader
    npm i sass-loader -D

配置步骤

1. 引入uView主JS库

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

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

2. 在引入uView的全局SCSS

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

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

3. 引入uView基础样式

注意!

App.vue首行的位置引入,注意给style标签加入lang="scss"属性

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

4. 配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

温馨提示

  1. uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。
  2. 请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。
  3. 如果您是通过uni_modules形式引入uView,可以忽略此配置
// pages.json
{
	// 如果您是通过uni_modules形式引入uView,可以忽略此配置
	"easycom": {
		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

添加效果实验运行即可成功

<template>
	<view class="content">

		首页
<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>

	</view>
</template>
相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css