1、使用Vant Weapp

安裝： npm init -y npm i @vant/weapp@1.3.3 -S --production

在項(xiàng)目目錄中新建目錄wxcomponents，把node_modules中的**@vant里面的dist文件復(fù)制到wxcomponents目錄**中，把dist名稱(chēng)修改為vant(自定義)

在pages.json中

全局引用：

"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "","navigationBarBackgroundColor": "#C00000","backgroundColor": "#FFFFFF","usingComponents": {"van-card": "/wxcomponents/vant/card/index"}},

局部引用：(主包、分包)

{"path": "pages/my/my","style": {"enablePullDownRefresh": false,"usingComponents": {"van-card": "/wxcomponents/vant/card/index"}}}

2、使用uView
uView依賴(lài)SCSS，您必須要安裝此插件，否則無(wú)法正常運(yùn)行。

// 安裝node-sass npm i node-sass -D// 安裝sass-loader npm i sass-loader -D

參考文檔有全部步驟：http://v1.uviewui.com/components/intro.html
安裝

npm init -y npm install uview-ui@1.8.4

配置

// main.js import uView from "uview-ui"; Vue.use(uView);

在項(xiàng)目根目錄的uni.scss中引入此文件。

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

在APP.vue中:注意要寫(xiě)在第一行

<style lang="scss">/* 注意要寫(xiě)在第一行，同時(shí)給style標(biāo)簽加入lang="scss"屬性 */@import "uview-ui/index.scss"; </style>

在pages.json中:配置easycom組件模式

{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},// 此為本身已有的內(nèi)容"pages": [// ......] }

總結(jié)

以上是生活随笔為你收集整理的HBuilder X中uniapp使用Vant Weapp、uView UI的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。