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结束