uni-app导入uViewUI组件库

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

uni-app导入uViewUI组件库

uViewUI官方文档

https://www.uviewui.com/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://blog.csdn.net/qq_40976321/article/details/106453181

相关文章
|
存储 安全 网络安全
【应用服务 App Service】App Service证书导入,使用Key Vault中的证书
【应用服务 App Service】App Service证书导入,使用Key Vault中的证书
205 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出现红叉)时候: 笔者自己实践过,只要在本地新建一个或者找一个可以跑通的项目,然后将这个可以跑通的项目的下图中的三个文件复制,覆盖在出问题的项目对应的文件上,即可 ...
869 0
|
1月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
430 139
|
1月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
298 137
|
1月前
|
数据采集 JavaScript 前端开发
开发比分App?你缺的不是程序员
开发体育比分App,关键不在代码,而在懂体育、懂数据、懂用户。明确定位、理清需求、选好数据源,再找专业的产品、数据与技术人才协同,才能少走弯路。程序员最后入场,效率最高。
218 154