一、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 导入插件
配置步骤文章来源:https://www.toymoban.com/news/detail-615486.html
- 引入 uView 主 JS 库
在项目根目录中的 main.js
,引入并使用 uView 的 JS 库,这两行要放到import Vue from 'vue'
后
代码如下(示例):文章来源地址https://www.toymoban.com/news/detail-615486.html
data = pd.read_csv(
'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
- 引入 uView 的全局 SCSS 主题文件
在项目根目录中的uni.scss
,引入全局SCSS主题文件
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
- 引入 uView 基础样式
在项目根目录中的App.vue
,注意,要在首行位置引入,并且给 style 标签添加lang="scss"
属性
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-ui/index.scss";
</style>
到了这里,关于uView 在 uni-app 中的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!