簡介:
npm install uview-ui
main.js頁面=>
import uView from "uview-ui";
Vue.use(uView);
uni.scss頁面=>
@import 'uview-ui/theme.scss';
App.vue頁面=>
@import 'node_modules/uview-ui/index.scss';
pages.json=>
"easycom": { "^u-(.*)": "@/node_modules/uview-ui/components/u-$1/u-$1.vue" },
重新運行項目,結束!
詳細步驟:
npm install uview-ui
npm方式安裝注意:如果提示no such file or directory 說明沒有初始化相關文件,
需要先運行命令:
npm init -y
然后再重新運行命令:
npm i uview-ui
安裝成功后會提示如下:
在項目根目錄中的main.js中,引入並使用uView的JS庫,
import uView from "./node_modules/uview-ui";
如果通過npm方式安裝引入地址須改為:
import uView from "./node_modules/uview-ui";
注意這行要放在import Vue之后。
Vue.use(uView);
在項目根目錄的uni.scss中引入此文件。
@import 'uview-ui/theme.scss';
在App.vue中首行的位置引入,注意給style標簽加入lang="scss"屬性,注意不要加scoped屬性
//項目根目錄下: @import 'uview-ui/index.scss';
//使用npm 安裝寫法: @import 'node_modules/uview-ui/index.scss';
uni-app為了調試性能的原因,修改easycom規則不會實時生效。
注意:npm方式安裝 uview不在根目錄下easycom寫為:
"easycom": { "^u-(.*)": "@/node_modules/uview-ui/components/u-$1/u-$1.vue" },
注意:微信小程序npm安裝寫法:
"easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" },
(重新編譯項目運行!!!)