【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】

①.微信小程序使用Vant

首先我们使用微信开发者工具创建一个空项目。
然后点击视图或者Ctrl+`进入终端
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第1张图片
在终端输入npm init 初始化项目,选择全部回车就可以。
接着在命令行输入vant官网的 cnpm i vant-weapp -S --production 安装语句进行安装
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第2张图片
完成后构建npm【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第3张图片
构建成功后就可以使用了。
那个页面需要使用引入即可,例如我的index页面引用button组件
在vant官网拿到想要使用的组件放到页面中【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第4张图片
然后在使用页面的json文件中引入vant组件
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第5张图片

刷新页面就可以成功展示了!!!
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第6张图片

注意—有时候刷新后未立刻出来----再重新构建npm三四次试一试!

②wepy使用Vant

首先进入任意文件夹,建议在桌面创建一个空文件夹方便找到。
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第7张图片

cmd进入终端【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第8张图片
进入终端后 cnpm i vant-weapp -S --production下载依赖包!!!
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第9张图片
在终端打开wepy创建的项目,wepy创建项目
$ npm install @wepy/cli -g # 全局安装 WePY CLI 工具 首次需要安装
$ wepy init standard myproj # 使用 standard 模板初始化项目
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第10张图片

$ cd myproj # 进入到项目目录
$ npm install # 安装项目依赖包
$ npm run dev # 监听并且编译项目
启动成功后,我们先用微信开发者工具打开用于查看,用vscode打开进行编辑
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第11张图片
在vscode中把初始化的不需要的东西都清空一下
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第12张图片
现在再拿到我们开始时创建的依赖包lib和dist随便选择一个复制到components中
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第13张图片
然后在需要所使用的页面引入
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第14张图片
最后大功告成啦
【①微信开发者工具引用Vant的方式和②wepy引用Vant的方式】_第15张图片

你可能感兴趣的:(小程序,npm,vue.js)