一、安装nodejs
参考网址
下载node的网址:http://nodejs.cn/download/
node安装及配置的网址:https://blog.csdn.net/JingYan_Chan/article/details/125405423
1.下载node.js
网址:http://nodejs.cn/download/
下载后直接安装,安装到其他盘,本次示范安装到【D:\RJ\nodejs】盘
2.安装好后配置环境变量
右击【此电脑】——【属性】
在用户变量中点击【新建】
变量名输入【NODE_PATH】
变量值输入nodejs的安装地址【D:\RJ\nodejs】
在用户变量的path中,输入 【%NODE_PATH%】,然后点击确定即可
至此,nodejs环境配置完毕。
3、打开CMD,检查是否正常path路径是否正常。
win+R,输入cmd打开命令行,输入下面语句。
echo %PATH%
出现如图内容,证明环境配置完成。
4、安装完成后测试下nodejs和npm是否安装成功。
在终端中输入以下两条命令语句:
node -v
npm -v
此时,nodejs和npm已安装完毕。
5、npm配置
先配置npm的全局模块的存放路径以及cache的路径
在nodejs下建立"node_global"及"node_cache"两个文件夹。
备注:为防止运行cmd命令出错,可设置这两个文件夹属性
文件属性设置好后,运行命令
在终端运行以下两条命令语句,如图所示:
npm config set prefix "D:\RJ\nodejs\node_global"
npm config set cache "D:\RJ\nodejs\node_cache"
如果运行没问题,如下图所示,输入指令,干净利索:
输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站。
输入命令npm config list 显示所有配置信息。
检查一下镜像站。输入以下两行命令语句:
npm config get registry
npm info vue
运行成功后:
增加环境变量NODE_PATH 内容是:D:\RJ\nodejs\node_modules,
对path环境变量添加D:\nodejs\node_global
到此node.js安装成功
二、在微信小程序开发中引入vant框架
参考网址(vant官网):
https://vant-contrib.gitee.io/vant-weapp/#/quickstart
微信开发文档,可在里面下载微信小程序开发安装包
https://developers.weixin.qq.com/miniprogram/dev/framework/
注意点:
(1)需安装微信小程序开发软件比较新的版本,建议安装最新版本
(2)小程序开发软件安装好后建议用管理员身份运行打开
如下图所示:
先新建小程序项目
1、 通过 npm 安装vant框架(在命令行中输入)
npm i @vant/weapp -S --production
若小程序底部调试器的终端中无法输入,则可换另外的方法输入
可在外部终端中安装vant框架
打开后需要切换小程序demo存放的路径然后输入命令,命令执行成功后,可看见小程序文件中多了两个json文件
2、修改 app.json
将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
3、修改 project.config.json
开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为’./'即可
4、构建 npm 包
若出现这个错误提示,则需要在根目录下建立miniprogram文件夹
然后再点击【工具 -> 构建 npm】,构建成功提示如下
构建成功后会在【miniprogram】文件夹中生成很多文件
新的开发版本中,详情——本地设置中没有【使用 npm 模块勾选框选项】,则不用理会,如果有则需勾选
不同开发版本会有点区别:
5、引入组件
以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。
所有组件文档中的引入路径均以 npm 安装为例,如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录。
// 通过 npm 安装
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
引入组件保存后在控制台中看到错误信息
需从根目录引入组件,路径对了,控制台便不会报错
使用组件
引入组件后,可以在 wxml 中直接使用组件文章来源:https://www.toymoban.com/news/detail-495703.html
<van-button type="primary">按钮</van-button>
可以看到引入vant组件成功了文章来源地址https://www.toymoban.com/news/detail-495703.html
到了这里,关于微信小程序开发引入vant框架(步骤详细,供学习的同学们参考)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!