1. Download the scss plug-in.
Find the "scss/sass compilation" plug-in in the HX menu's Tools->Plug-in Installation and install it. If it does not take effect, just restart HX. Download
link scss/sass compilation - DCloud plug-in market
2. Download the uView file.
In the upper right corner of the uni-app plug-in market, choose to use
HBuilder Go to the project root directory.
Download link uView2.0 is released, the sword is unsheathed, and the world is unified - DCloud plug-in market
Place it in the root directory of the file
3. Introduce uView main JS library
In main.js in the project root directory, introduce and use uView's JS library. Note that these two lines should be placed after import Vue.
import uView from "uview-ui";
Vue.use(uView);
4. Introduce uView’s global SCSS theme file
/* uni.scss */
@import 'uview-ui/theme.scss';
5. Introduce uView basic style
Note: Introduce it in the first line of App.vue, be sure to add the lang="scss" attribute to the style tag
<style lang="scss">
/* Note that it should be written on the first line, and add the lang="scss" attribute to the style tag*/
@import "uview-ui/index.scss";
</style>
6. Configure easycom component mode.
This configuration needs to be performed in pages.json in the project root directory.
Tip: For debugging performance reasons, uni-app's modification of 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.
Please make sure there is only one easycom field in your pages.json, otherwise please merge multiple import rules yourself.
// pages.json
{ "easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" }, // This is already available Content "pages": [ // ... ] }