The use of uView in uni-app


1. What is uView?

提示:正文内容:

uView official website: https://www.uviewui.com uView is a UI framework dedicated to uni-app ecology

Regarding the name of uView, the initial letter u comes from the initial letter of uni-app, uni-app is based on Vue.js, Vue and View (extended to UI, view) have the same pronunciation, and the view component is in uni-app The most basic and important component, so it is named uView, expressing the meaning of uni-app and Vue, and I would like to express my gratitude to them here.

1. uView installation

uView official website provides two installation methods: Hbuilder X method, NPM method

Hbuilder X method: use uni-app to build the project, NPM method: use the vue cli to build the project, choose the corresponding method according to the project framework and install it

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

2. The use of uView in uni-app

使用 HBuilderX 导入插件
configuration steps

  1. Import uView main JS library

In the root directory of the project main.js, import and use the uView JS library, these two lines should be put import Vue from 'vue'after
the code as follows (example):

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
  1. Import the global SCSS theme file of uView
    In the project root directory uni.scss, import the global SCSS theme file
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
  1. Import the uView basic style
    in the root directory of the project App.vue. Note that it should be imported at the first line and add lang="scss" attributes to the style tag
<style lang="scss">
    /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-ui/index.scss";
</style>

Guess you like

Origin blog.csdn.net/qq_34082921/article/details/131986209
Recommended