首页 前端知识 微信小程序如何进行npm导入组件

微信小程序如何进行npm导入组件

2024-08-05 23:08:59 前端知识 前端哥 868 309 我要收藏

文章目录

目录

文章目录

前言

一、安装node

二、微信小程序通过npm安装组件(以Vant-weapp为例)

         一、Vant-weapp下载

        二 、修改 app.json

        三 、修改 project.config.json

          四 、 构建 npm 包



前言

微信小程序使用npm导入有很多的教程,我根据自己所看到的整合了一下,希望对大家有帮助


一、安装node

Node.js — Run JavaScript Everywhere (nodejs.org)icon-default.png?t=N7T8https://nodejs.org/en/

这个是官网,但是下载速度可能较慢,可以去找国内镜像网站下载

下载完成后可在命令行窗口输入npm -v和node -v测试是否安装好,如果显示版本号则代表安装成功

其他的没有什么需要注意的,但是要记住自己安装的目录,接下来配置需要用到

安装完成后找到所安装的位置,在node_modules同级目录下创建以下两个文件夹

然后win+r打开命令行输入以下代码并回车

注意这里的文件位置是你自己上一步所创建的文件的所在路径,就是 "D:\nodejs\node_global"这部分根据你自己的实际位置填写

npm config set prefix "D:\nodejs\node_global"

再次运行以下代码然后回车

npm config set cache "D:\nodejs\node_cache"

node_global是全局目录就是所下载的东西的存放地址

node_cache缓存文件夹

以上代码就是设置全局目录和缓存文件夹的位置

最后可以配置一下下载的镜像网站,复制你用npm下载时速度过慢

同样是命令行输入npm config set registry=http://registry.npm.taobao.org回车即可,详细的可参考此网址https://www.cnblogs.com/liluxiang/p/9592003.html

二、微信小程序通过npm安装组件(以Vant-weapp为例)

     

一、Vant-weapp下载

这里创建微信小程序项目我就不过多的介绍了,在我们创建好微信小程序之后在搜索框输入cmd进行查找

找到之后以管理员身份运行

然后找到你的微信小程序项目的位置

然后进入到你微信小程序项目目录

如果你的微信小程序在c盘则应该先进入c盘,就输入c:然后回车就进入c盘了,如果是d盘则输入d:然后回车其他盘照着这个进入,然后cd xx文件夹/xx项目如下

这里我的微信小程序项目是在wxpro这个文件夹中001这个文件夹里所以是cd wxpro/001然后回车即可,回车之后输入npm init -y之后在vant-weapp官网找到快速上手里的安装并复制代码,网址为快速上手 - Vant Weapp (gitee.io)

然后返回命令行窗口粘贴代码回车运行,运行结果如下则为安装成功

这里说明一个错误

C:\Users\28104>npm i @vant/weapp -S --production
npm WARN config production Use `--omit=dev` instead.
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path D:\node\node_cache\_cacache\index-v5\a0\62\1a21c7d10854f790861ca3eeaf2cb63169f087fc3eecb979d1763ea40db9
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'D:\node\node_cache\_cacache\index-v5\a0\62\1a21c7d10854f790861ca3eeaf2cb63169f087fc3eecb979d1763ea40db9'
npm ERR!  [Error: EPERM: operation not permitted, open 'D:\node\node_cache\_cacache\index-v5\a0\62\1a21c7d10854f790861ca3eeaf2cb63169f087fc3eecb979d1763ea40db9'] {
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'D:\\node\\node_cache\\_cacache\\index-v5\\a0\\62\\1a21c7d10854f790861ca3eeaf2cb63169f087fc3eecb979d1763ea40db9',
npm ERR!   requiredBy: '.'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! Log files were not written due to an error writing to the directory: D:\node\node_cache\_logs

造成这样错误的原因是由于没有以管理员的身份去打开命令行窗口,以管理员身份打开就可以下载成功

下载成功之后你的微信小程序项目中会多出一个文件夹

然后进入你的微信小程序项目

二 、修改 app.json

将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

三 、修改 project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogrampackage.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

       四 、 构建 npm 包

选择工具,然后选择构建npm

然后

app.jsonindex.json中引入组件即可使用

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14860.html
标签
评论
发布的文章

JQuery的选择器有哪些?

2024-08-14 22:08:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!