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>

相关推荐
UI前端开发工作室5 分钟前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~8 分钟前
重学前端004 --- html 表单
前端·html
ydm_ymz29 分钟前
C语言初阶4-数组
c语言·开发语言
Maybyy30 分钟前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈34 分钟前
CSS中的Element语法
前端·css
presenttttt37 分钟前
用Python和OpenCV从零搭建一个完整的双目视觉系统(六 最终篇)
开发语言·python·opencv·计算机视觉
逐花归海.38 分钟前
『 C++ 入门到放弃 』- 多态
开发语言·c++·笔记·程序人生
Real_man40 分钟前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中41 分钟前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术43 分钟前
日历插件-FullCalendar的详细使用
前端·javascript