1. Create a UI project

First, our UI is based on ColorUI. When ColorUI does not have a style, it is based on Uniapp’s built-in UI. So start the project by introducing these two UI frameworks.

As follows, create a new UNI-UI project.

Create another ColorUI project.

If you need to see the effect of ColorUI to see which components you need to use, you can run it as follows.

Uni – the UI in the same way. So whatever styles we need can be drawn from these two UIs.

2. Build your own project

Create a new uniAPP project of your own, after the completion of the establishment. The project structure is as follows.

Next, introduce the ColorUI style:

  • Copy the ColorUI directory under ColorUI project to the root directory of your project.
  • Add two CSS files to the app. vue file in your project root directory as follows
<style> /* public CSS for each page */ @import "colorui/main.css"; @import "colorui/icon.css"; </style>Copy the code
  • If you need any style, go to the ColorUI project to examine the element and copy the corresponding class.

If the style you want is ColorUI, you need to introduce the style of UNI-UI:

  • Copy common from the root of the UNI-UI project to the root of your project
  • Add CSS files to app. vue directory and app. vue looks like this:
<style> /* public CSS for each page */ @import "colorui/main.css"; @import "colorui/icon.css"; @import url("common/uni.css"); </style>Copy the code

From here, the UI project import is complete

3. Some groundwork

  • Use Tabbar: Go to the UniApp website to find the tabbar section and copy it.

  • Page jump and request initiation: go to the official website of UNIApp and use the components of UniApp
  • If a page is too complex, splitting it into multiple components is recommended. Create a compoment directory under the page directory and create multiple components (vue files) under the compoment directory, as shown below:

  • Import components: Import components where needed, and even pass values, as shown below.

4. Layout

Here are some practical tips for page layout.

  • Elements are on a single line from top to bottom, using a standard stream div layout
  • If the elements need to be arranged in a row, a floating float layout is required. But floating layouts can’t precisely position elements in the container, so you need to position the position layout. But this approach, which requires moving away from the document flow and requiring various clearances to clear floats, is lagging behind. Flex layout is recommended
  • To sum up, the top-down layout uses div and the left-to-right layout uses float and position. Or use Flex
  • The advantage of using Flex is that you can context-content elements to a specified location in the left and right layout. Hence the popularity of this layout.

Recommend the tutorial

Have some basis in VUE recommend watching this introductory tutorial: www.bilibili.com/video/BV1Zt…