uniapp 安装 u-view 组件库

u-view 组件库安装教程:https://uviewui.com/components/install.html

注:以下使用 HBuilderx 安装 u-view 2.0 版本,不适用于其它版本。

1.安装 u-view 组件库

2、注册并登录 HBuilderx 账号,点击下载 u-view 组件库。

3、点击打开 HBuilderx,选择要安装 u-view 的项目,点击确定。

4、出现以下内容表示安装成功。

引入 u-view 组件库:

1、打开项目所在文件夹,进入根目录,输入 cmd 打开命令行工具。

2、进入 u-view 官网,点击链接准备安装 u-view 组件库。

3、在命令行中分别安装 sass 和 sass-loader 依赖。

安装命令:

javascript 复制代码
// 安装sass
npm i sass -D

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

4、在 main.js 文件中引入 u-view 组件库,一定要放在 `import Vue` 之后引入。

引入内容:

javascript 复制代码
// 引入 u-view 组件库
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

5、在 uni.scss 文件中引入 u-view 样式库。

6、在 App.vue 文件中引入 u-view 基础样式,一定要在首行引入,并给 style 标签添加 `lang="scss"` 属性。

7、在 pages.json 文件中配置 easycom 组件模式(可省略)。

引入内容:

javascript 复制代码
// 给 u-view 配置 easycom 组件模式
"easycom": {
	"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
}

注:配置完毕后,需要重启项目,接着就可以使用组件啦!

原创作者:吴小糖

创作时间:2023.10.19

相关推荐
芭拉拉小魔仙2 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
goto_w3 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
小宝小白3 小时前
【vue3】黑马小兔鲜儿项目uniapp navigationStyle
uni-app
Json____15 小时前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位
web_Hsir1 天前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir1 天前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa1 天前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘1 天前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界2 天前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨2 天前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送