网站建设定制开发微信小程序安装-weapp报 node_module不存在:
提示:网站建设定制开发这里简述项目相关背景:
想使用vant-weapp写小程序,网站建设定制开发在安装的时候踩了一些坑,记录一下
1.安装@vant/weapp
提示:这里一个一个来描述遇到的问题:
- 我是根据官网,并且使用npm安装
# 通过 npm 安装npm i @vant/weapp -S --production
- 1
- 2
但是由于我图方便,在一个包含几个项目的路径下执行了此命令,结果并没有安装成功,是由于后面初始化packge.json一直不成功才回头去发现,so,一定不要为了一时便利,其实反而带来更多麻烦,多此一举
so,一定要在需要使用的项目下执行安装命令
2.初始化packge.json文件
按照官网后面重要的一步是
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。因为现在的版本更新
{ ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ] }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
照着修改project.config.json文件,然后照着官网去npm构建,会发现,会报找不到== packge.json==文件的错误 ,那么这个时候就需要在项目根目录下打开命令运行面板 输入下面命令
npm init
- 1
然后对于下面的给出的内容一路enter键,packge.json文件就生成了,并且还有一个 packge-lock.json和node_modules以及miniprogram_npm文件夹一起被生成
然后在去npm构建
显示成功
3.使用vant组件
当构建完成 我们需引用组件才能使用,组件可以在全局,也可以是单个页面
// 通过 npm 安装// app.json"usingComponents": { "van-button": "@vant/weapp/button/index"}
- 1
- 2
- 3
- 4
- 5
然后在想要使用组件的页面直接使用组件
<van-button type="primary">按钮</van-button>
- 1
但是如果不认真,一运行就会发现报错,难道== 引用==出错了?不,其实只需要修改一下路径
因为我们的@vant文件夹是在miniprogram_npm下的,修改完之后就可以顺畅的使用啦