微信小程序开发引入vant框架(步骤详细,供学习的同学们参考)
一、安装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 中直接使用组件
<van-button type="primary">按钮</van-button>
可以看到引入vant组件成功了
微信小程序开发引入vant框架(步骤详细,供学习的同学们参考)相关推荐
- 微信小程序开发-引入阿里巴巴矢量icon图标库
微信小程序开发-引入阿里巴巴矢量icon图标库 https://blog.csdn.net/tang1392/article/details/78927107
- 微信小程序开发原生与框架对比
1.为什么使用框架 (1) 原生微信小程序工程化差.不支持node (2) 原生微信小程序语法比较奇怪还需要我们学习新的一套语法. (3) 微信小程序的开发者工具开发体验较差. (4) 使用框架可以使 ...
- 微信小程序 开发工具 项目创建步骤
账号申请 后台小程序信息完善 安装开发工具IDE 小程序项目搭建 项目编译 真机预览调试 小程序开发前准备: ①申请账号 ②安装开发工具 账号申请 进入小程序注册页 根据指引填写信息和提交相应的资料, ...
- 微信小程序开发环境搭建(超详细)
微信小程序开发环境的搭建是很简单的 首先我们需要是登录微信公众平台 微信公众平台 点击右上角立即注册 注册账号类型选择小程序 进入注册界面后按提示完成账号信息 邮箱激活 信息登记 注册完成后界面如下, ...
- 在微信小程序里引入Vant Weapp组件库详细步骤
1. 新建一个文件夹. 2. 使用微信开发者工具 选择一个模板(这里以javaScript 基础模板 为例) 选择完模板之后如下: 2. 右键打开终端:按如下步骤执行命令. ① npm init 解释 ...
- 微信小程序开发引入RUM,实现小程序监控
在做微信小程序开发过程中,希望对自己小程序的性能,质量有一个更好的把控,因此希望引入RUM产品来做补充,相应产品的链接如下: 前端性能监控RUM_前端监控_页面监控- 腾讯云 一.安装:根据RUM接入 ...
- 微信小程序中使用vant框架
一.Vant 是有赞前端团队开源的移动端组件库, Vant 是一个轻量.可靠的移动端组件库,于 2017 年开源.目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社 ...
- 微信小程序开发入门——uni-app框架
uni-app (Union Application) 是一个基于Vue.js的前端框架:开发规范借鉴了微信小程序 前端技能点: 前后端分离,后端给接口和API文档,注重前端 用uni-app框架 作 ...
- 微信小程序开发初学者之入门步骤和体验
在Android 项目不忙之余,自学了微信小程序入门.常听前辈说,做一名开发人员最重要的不是你会什么语言, 而是在面对不会的语言和未接触过的任务时,有着怎样的学习力和学习逻辑.仿佛又回到了高三那一段难 ...
最新文章
- 快节奏的多人游戏同步 - 示例代码和在线演示
- layer用ajax往jsp页面传值,layer.open中父页面向子页面传值(示例代码)
- 曙光i620c20用户手册_曙光天阔I620-G20服务器技术白皮书.pdf
- [Security] Automatically adding CSRF tokens to ajax calls when using jQuery--转
- 【CV】带你入门多目标跟踪(一)领域概述
- CTF Geek Challenge——第十一届极客大挑战Misc Write Up
- 小余学调度:学习记录2021年9月
- 肝!教你用Python抓取某天下楼盘数据
- C++共享内存类封装
- java里面的string类型,java中的String类型(不知道理解的好不,请教大神)
- php访问mysql数据库实验报告,php访问mysql数据库
- 【报告分享】数据大治理-毕马威阿里研究院.pdf(附下载链接)
- 僵尸 AI 来了,人类该怎么办?
- git分布式版本管理系统和github平台
- Fibonacci算法
- 如何给一个响应式数据添加一个属性 this.$set
- ROS(9):机器人开源项目poppy-project
- IntelliJ IDEA开发Java web项目,设置JSP代码自动补全的方法
- 2021-01-21:脉冲神经网络学习日志
- 计算机卡死快捷键,必看!电脑运行卡或软件卡死无响应,怎么办?
热门文章
- 警惕!又一疑似东南亚“黑砖窑”人才输送基地
- html元素一行显示不完收缩_CSS white-space norma nowrap强制同一行内显示所有文本不换行...
- java线程池存在时间_Java线程池基础
- 模板方法模式-用模板方法排序
- 小白看完都学会了!mysqlmergeintousing
- Camunda工作流引擎一
- 【精品】使用阿里的EasyExcel读写Excel文档
- Kafka 积压了百万消息如何处理?
- 学习笔记——margin-top,margin-bottom之间的合并问题
- 数据挖掘综述——王光宏、蒋平