uView 在 uni-app 中的使用

文章目录

  • 一、uView是什么?
    • [1.uView 安装](#1.uView 安装)
    • [2.uView 在 uni-app 中的使用](#2.uView 在 uni-app 中的使用)

一、uView是什么?

提示:正文内容:

uView 官网:https://www.uviewui.com uView 是 uni-app 生态专用的 UI 框架

关于uView的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)同音,同时view组件是uni-app中 最基础,最重要的组件,故取名uView,表达源于uni-app和Vue之意,同时在此也对它们表示感谢。

1.uView 安装

uView 官网提供了两种安装方式: Hbuilder X 方式、NPM 方式

Hbuilder X 方式: 使用 uni-app 搭建的项目,NPM 方式: 使用 vue cli 搭建的项目,根据项目框架选择相应的方式安装即可

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

2.uView 在 uni-app 中的使用

使用 HBuilderX 导入插件

配置步骤

  1. 引入 uView 主 JS 库

在项目根目录中的 main.js,引入并使用 uView 的 JS 库,这两行要放到import Vue from 'vue'

代码如下(示例):

javascript 复制代码
data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
  1. 引入 uView 的全局 SCSS 主题文件
    在项目根目录中的 uni.scss,引入全局SCSS主题文件
javascript 复制代码
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
  1. 引入 uView 基础样式
    在项目根目录中的 App.vue,注意,要在首行位置引入,并且给 style 标签添加 lang="scss"属性
javascript 复制代码
<style lang="scss">
    /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-ui/index.scss";
</style>

相关推荐
阿幸软件杂货间14 分钟前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
蚂蚁RichLab前端团队21 分钟前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
扯淡的闲人24 分钟前
多语言编码Agent解决方案(5)-IntelliJ插件实现
开发语言·python
丑小鸭是白天鹅34 分钟前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin
孩子 你要相信光36 分钟前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军38 分钟前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
sali-tec43 分钟前
C# 基于halcon的视觉工作流-章34-环状测量
开发语言·图像处理·算法·计算机视觉·c#
java搬砖工-苤-初心不变43 分钟前
基于 lua_shared_dict 的本地内存限流实现
开发语言·junit·lua
huangql5201 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy1 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app