preface

Uni-app – CLI scaffolding for easy and quick development.

Uni – the app’s official website

1. Uni-app uses Vant components

Vant is the open source mobile component library of Uzan front-end team. It was opened in 2016 and has been maintained for 4 years. Vant carries all the core business of Yizan internally and serves more than 100,000 developers externally. It is one of the mainstream mobile terminal component libraries in the industry. Vant provides Vue version and Vant-appellate version, while community teams maintain the React version

1.1 Procedure

1) Create a new wxComponents directory under the project root directory. This directory should be the same as the Components directory. 2) Download the latest source code of VOant-pervasive P directly through Git, copy the dist directory to the newly created wxComponents directory, and rename dist as voant-pervasive P.

Warehouse address: gitee.com/vant-contri… Git Clone github.com/youzan/vant…

3) Introduce common styles in app.vue

3) inpages.jsontheglobalStyleTo import the required components

Note: In globalStyle configuration all pages are available as follows:

Note: a page style configuration is used only on the current page, as follows:

4) Matters needing attention

The Notify message in the Vant component is special

Not only does it need to be introduced in the globalStyle of pages. Json but it also needs to be added to the vue prototype in main.js

import Notify from './wxcomponents/vant-weapp/notify/notify';

Vue.prototype.$notify = Notify
Copy the code

Then use it on the page

<template>
	<view  class="body">Home page<vant-button type="primary" size="small"  @click="showNotify">vant-weapp</vant-button>
        <vant-notify id="van-notify" />
	</view>
</template>

<script>
    export default {
        data() {
                return{}},methods: {
            showNotify() {
                this.$notify({ type: 'primary'.message: 'This is how you can do something about it.' });
            },
            onShow(){}}</script>

<style lang="scss" scoped>
	
</style>
Copy the code

2. Uni-app uses iconfont

First, log on to the official website of IconFont, create your own project, find the icon you need to add to the shopping cart, and then add to the project

Then go to icon Manager, my project, generate Unicode, click download to local, unzip

Add the decompressed iconfont. CSS to the common folder and convert the url path in the iconfont. CSS file to the online path, that is, add HTTPS:

Import this file globally in app. vue @import “./common/iconfont. CSS “; (according to the file path), that is, can be used in each page

The warehouse address

Gitee.com/yam_pro/uni…