微信小程序--引入第三方框架 Vant (配合vsCode)

1.新建小程序项目文件

2.初始化生成项目结构如下，同时我们手动在根目录下新建文件夹miniprogram (为引入vant 做准备)

3. 鼠标右键miniprogram文件夹，选在在终端打开

输入命令：npm init（记得以管理员身份运行开发工具）,然后一直回车，直至在miniprogram文件夹下，生成package.json文件。

3.安装依赖

通过npm安装,执行以下命令

       1：npm install --production

       2: npm i @vant/weapp -S --production

 4.构建 NPM 包

       打开微信开发者工具，点击 工具 -> 构建 npm，并点击详情，勾选 使用 npm 模块 选项，构建完成后，即可引入组件

 

5.引入组件 

在app.json中新增子页面test

在test.json中配置

{

  "usingComponents": {

    "van-button":"../../miniprogram/miniprogram_npm/@vant/weapp/button/index"

  }

}

 在test.wxml使用组件

<view class="test">
	<van-button plain type="primary">默认按钮</van-button>
</view>

如图：

配置vsCode编辑器(个人习惯) ：安装小程序开发助手(代码编写有相关小程序组件的提示)和Easy Less(我们继续在项目中使用less模式，此插件会根据我们的.less文件帮我们自动生成.wxss文件)，从而保证习惯和开发效率

 nice结束