HBuilder X中uniapp使用Vant Weapp、uView UI

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": [
		// ......
	]
}