微信小程序引入Vant Weapp

Posted 2023-02-04 叉腰大眼仔

• 在小程序的根目录执行npm init一路回车yes生成package.json文件
• 引入Vant Weapp，在小程序的根目录执行,生成node_modules

npm i @vant/weapp -S --production

• 使用npm模块打钩，工具-》构建npm，结束出现miniprogram_npm
  

微信小程序使用

• 内置样式，app.wxss文件中加入

 @import "miniprogram_npm/@vant/weapp/common/index.wxss";

• 1

• Vant Weapp的组件使用，在index.json或app.json引入

 "usingComponents":
    "van-button": "@vant/weapp/button/index"
  

• 1
• 2
• 3

• 在index.wxml中写入样式

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

• 1
• 2
• 3
• 4
• 5

 

Mac中如何安装Node.js和npm

去官网：Node.js下载node.pkg文件

 

 

双击安装

 

安装完成：

Node.js was installed at    /usr/local/bin/node npm was installed at    /usr/local/bin/npm Make sure that /usr/local/bin is in your $PATH.

然后去命令行测试，可以了：

 

➜  JiandaoWorkbench npm -v 2.15.8 ➜  JiandaoWorkbench

 

原文链接：https://blog.csdn.net/weixin_43674113/article/details/107638873
                   https://www.crifan.com/mac_how_install_node_js/