Uni-app series (2) : UniAPP project introduces uView and uses it simply

📖 the

Good attitude, not so tired. In a good mood, all you see is beautiful scenery.

"If you can't solve a problem for a while, use this opportunity to see your limitations and put yourself out of order." As the old saying goes, it's easy to let go. If you are distracted by something, learn to disconnect. Cut out the paranoia, the trash in the community, and get rid of the negative energy. Good attitude, not so tired. In a good mood, all you see is beautiful scenery.

Today, let’s shareuni-appIntroduced and used inuViewUISome basic knowledge of welcome attention!

Welcome to the summary series:The wild growth of UNI-APP learning path

🌂 uni – app introduced uViewUI

• uViewUI 在 HBuilder XPlug-in market:Ext.dcloud.net.cn/plugin?id=1…
• uViewUIOfficial Address:uviewui.com/

1.npmInstall or updateuViewUI

1.1, install,

NPM install uview-ui
Copy the code

1.2, update,

You can use the updated version if you have installed it

// NPM update uview-ui
Copy the code

1.3. View the version number

There are two ways to query the version of the uView you are using:

It is printed through console.log

console.log(this.$u.config.v);
// Or (both equivalent)

console.log(this.$u.config.version);
Copy the code

View the form through the source code

You can refer to the uView configuration file for the current version number: “/uview-ui/libs/config/config.js”.

2. Configuration of NPM installation mode

UView relies on SCSS, and you must install this plug-in otherwise it will not work.

2.1,HBuilderXTool to installscssPlug-ins: HX menu tools -> Plug-ins found in installation"SCSS/sass compilation"Plug-in installation

Import directly from the plugin market: ext.dcloud.net.cn/plugin?id=2…

Note: The plug-in market does not support IE jump, it is recommended to use Google browser

If your project was created by vue-CLI, install support for SASS (SCSS) by using the following command, or skip it if installed.

/ / installation node - sass
npm i node-sass -D
 
/ / install sass - loader
npm i sass-loader -D
Copy the code

3. Configure related files

In 3.1,main.jsFile global importuView

/ / the main js file
import uView from "uview-ui";
Vue.use(uView);
Copy the code

As shown in figure:

3.2,uni.scssThe file importuViewThe globalSCSSTheme files

@import 'uview-ui/theme.scss';
Copy the code

As shown in figure:

3.3. Introduce uView base style in app. vue file

<style lang="scss">
    /* Make sure to write it on the first line and add the lang=" SCSS "attribute */ to the style tag
    @import "uview-ui/index.scss";
</style>
Copy the code

As shown in figure:

4. Global import and load on demand

4.1. Global introduction

Configure easycom in pages. Json

Note: For uni-app performance debugging reasons, changes to easyCOM rules will not take effect in real time. After configuration, you need to restart HX or recompile the project to use uView functions normally. Make sure you have only one Easycom partition in your pages.json, otherwise merge multiple dating rules yourself.

// pages.json 
{ 
   "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }, "Pages ": [//......] }
Copy the code

As shown in figure:

4.2. Load on demand

In some cases, you may not want to reference components through easycom (though we highly recommend using easycom), so you can use import as a regular dating method, as follows:

<template>
    <u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>

<script>
    import uActionSheet from "uView-ui/components/u-action-sheet/u-action-sheet.vue";
    export default {
        components: {
            uActionSheet
        },
        data() {
            return {
                list: [{
                    text: 'thumb up'.color: 'blue'.fontSize: 28
                }, {
                    text: 'sharing'
                }, {
                    text: 'comments'}].show: true}}}</script>
Copy the code

Finally, thank you for your patience to watch the end, the original is not easy, six points like collection is your biggest encouragement to me!

🎉 summary:

• For more references, see here:The Blog of Chan Wing Kai

• Like the small partner of the blogger can add a concern, a thumbs-up oh, continue to update hey hey!