uniapp安裝uview


簡介:

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" },

 

(重新編譯項目運行!!!)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM