1、使用Vant Weapp

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

在項目目錄中新建目錄wxcomponents，把node_modules中的**@vant里面的dist文件復制到wxcomponents目錄**中，把dist名稱修改為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依賴SCSS，您必須要安裝此插件，否則無法正常運行。

// 安裝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);

在項目根目錄的uni.scss中引入此文件。

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

在APP.vue中:注意要寫在第一行

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。