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>

相关推荐
Ronin30529 分钟前
【C++】类型转换
开发语言·c++
伍哥的传说42 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783844 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
mrbone111 小时前
Git-git worktree的使用
开发语言·c++·git·cmake·worktree·gitab
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
真实的菜1 小时前
JVM类加载系统详解:深入理解Java类的生命周期
java·开发语言·jvm
代码讲故事1 小时前
多种方法实现golang中实现对http的响应内容生成图片
开发语言·chrome·http·golang·图片·快照·截图
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
虾球xz2 小时前
CppCon 2018 学习:EFFECTIVE REPLACEMENT OF DYNAMIC POLYMORPHISM WITH std::variant
开发语言·c++·学习