🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 为HBuilder安装scss插件 ## 一、安装方式 在文件根目录下打开cmd,执行安装命令 ``` npm init -y npm install uview-ui npm update uview-ui ``` ## 二、引入组件库 ``` import uView from 'uview-ui'; Vue.use(uView); ``` ## 三、main.js中引入 ~~~ import uView from "uview-ui"; Vue.use(uView); ~~~ ## 四、在引入uView的全局SCSS主题文件 在项目`src`目录的`uni.scss`中引入此文件。 ~~~ /* uni.scss */ @import 'uview-ui/theme.scss'; ~~~ ## 五、引入uView基础样式 注意! 在`App.vue`中**首行**的位置引入,注意给style标签加入lang="scss"属性 ~~~ <style lang="scss"> /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */ @import "uview-ui/index.scss"; </style> ~~~ ## 六、配置easycom组件模式 此配置需要在项目`src`目录的`pages.json`中进行。 温馨提示 1、uni-app为了调试性能的原因,修改`easycom`规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。 2、请确保您的`pages.json`中只有一个`easycom`字段,否则请自行合并多个引入规则。 ~~~ // pages.json { "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }, // 此为本身已有的内容 "pages": [ // ...... ] } ~~~