uniapp 安装 u-view 组件库

简介: 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 依赖。

安装命令:

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

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

引入内容:

// 引入 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 组件模式(可省略)。

引入内容:

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

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

相关文章
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
33 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
139 10
|
2月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
119 5
|
2月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
130 2
|
2月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
87 1
|
2月前
Uniapp矩阵评分组件
Uniapp矩阵评分组件
56 1
|
2月前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
41 0
|
2月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
50 0
|
2月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
95 0
|
2月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
123 0
下一篇
DataWorks