在uni-app中引入uView

在uni-app中引入uView的方式有兩種：

通過npm下載下傳

// 如果您的根目錄沒有package.json檔案的話，請先執行如下指令：
// npm init -y
 
npm install uview-ui
 
// 更新
// npm update uview-ui      

配置步驟

1.引入uView主JS庫

在項目根目錄中的main.js中，引入并使用uView的JS庫，注意這兩行要放在import Vue之後。

// main.js
// 引入全局 uView 架構
import uView from 'uview-ui';
Vue.use(uView);      

2.在引入uView的全局SCSS主題檔案

在項目根目錄的uni.scss中引入此檔案。

/* uni.scss引入view主題樣式 */
@import 'uview-ui/theme.scss';      

3.引入uView基礎樣式

注意：在App.vue中首行的位置引入，注意給style标簽加入lang="scss"屬性

<style lang="scss">
  /* 注意要寫在第一行，同時給style标簽加入lang="scss"屬性 */
  @import "uview-ui/index.scss";
</style>      

4.配置easycom元件模式

在pages.json配置，uni-app為了調試性能的原因，修改easycom規則不會實時生效，配置完後，您需要重新開機Hbuilder X或者重新編譯項目才能正常使用uView的功能。請確定您的pages.json中隻有一個easycom字段，否則請自行合并多個引入規則。

"easycom": {
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
  },      

通過插件市場安裝

如果使用Hbuilder X進行開發，就可以在uni-app​​插件市場​​通過uni_modules的形式進行安裝。

1.點選導入

2.打開hbuilderX

3.選擇項目

4.開始下載下傳

5.確定安裝了scss/sass編譯器

在工具中找到“插件安裝”

配置步驟

1.引入uView主JS庫

在項目根目錄中的main.js中，引入并使用uView的JS庫，注意這兩行要放在import Vue之後。

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView      

2.在引入uView的全局SCSS主題檔案

在項目根目錄的uni.scss中引入此檔案。

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';      

3.引入uView基礎樣式

<style lang="scss">
  /* 注意要寫在第一行，同時給style标簽加入lang="scss"屬性 */
  @import "@/uni_modules/uview-ui/index.scss";
</style>      

"easycom": {
    "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
  },