Use the UView UI framework on a UniApp project

Preface (nonsense) —- don’t see also line

Just work not long, the company directly gave a hand of new projects, WeChat small program, often heard that there are partners in the group with these two sets of development, feel very sweet, so I decided to use this set

Creating a UniApp from UniApp is easy, and referencing a UView is a bit confusing… Decide on the entire tutorial,

If in accordance with my method can not be used, please remind me, I update or delete, to avoid the back of the small partner was my pit….

The text start

  1. Download uView plugin official download address 👉 click “download plug-in ZIP” 1.1 1.2 will download a ZIP file decompression uView – UI folder and copy of the 1.3 Copy the uviw-ui folder to the uni-app project root directory you created
  2. In the uniapp project root directorymain.jsFile introduction and use of the UView library
// Use the uView library to import uView from 'uview-ui'; Vue.use(uView);

  1. In the uniapp project root directoryApp.vueFile introduces the base style

    <style lang=" SCSS "> // import "uview-ui/index.scss"; </style>

    Sass/SCSS compilers are required to be installed in HBuild, otherwise an error will be reported during compilation. If not installed, please remember to install it immediately

  1. In the uniapp project root directoryuni.scssFile introduces global SCSS variable files
/* uni.scss */
@import "uview-ui/theme.scss";

  1. In the uniapp project root directorypages.jsonFile to configure easycom rules

    "easycom": {
     "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"

    Now that the groundwork is done, let’s use it for a while

    👉 uview website (

  • The list on the left has a lot of components, find the ones you want, or like, and copy the component infrastructure code into your project. Let’s try to copy the code circled in green in the image above into our project

Look at the effect, in fact, in the official website corresponding component introduction on the right side can see the effect

By the way, there are a number of properties that can be set on the component description side, which can be configured to fit the needs of the current project (it is recommended to browse the documentation of the entire component before using each component).

All right, you can ask me if you don’t know what to say

How to install SASS/SCSS plugin on HBuilder

1. Go straight to the picture. There is an introduction on the picture

2. After entering the official website of the plugin, the first thing is to display the Sass plugin, directly click in, and search if there is no plugin

3. Click “Use HBulider” to install the plug-in, and follow the prompts to open and return to HBulider

4. After returning to HBulider, it will pop up whether to install the plug-in or not. There are installation tips in the lower right corner. After successful, open our HBulier installation panel to confirm whether it has been successfully installed (if not, try again…).