咋制作网站,佛山网站建设公司哪家好,做网站维护学什么编程语言,网上书店网站建设目标文章目录 目录
文章目录
前言
一、安装node
二、微信小程序通过npm安装组件#xff08;以Vant-weapp为例#xff09; 一、Vant-weapp下载
二 、修改 app.json
三 、修改 project.config.json 四 、 构建 npm 包 前言
微信小程序使用npm导入有很多的教程#xff0c;我… 文章目录 目录
文章目录
前言
一、安装node
二、微信小程序通过npm安装组件以Vant-weapp为例 一、Vant-weapp下载
二 、修改 app.json
三 、修改 project.config.json 四 、 构建 npm 包 前言
微信小程序使用npm导入有很多的教程我根据自己所看到的整合了一下希望对大家有帮助 一、安装node
Node.js — Run JavaScript Everywhere (nodejs.org)https://nodejs.org/en/
这个是官网但是下载速度可能较慢可以去找国内镜像网站下载
下载完成后可在命令行窗口输入npm -v和node -v测试是否安装好如果显示版本号则代表安装成功
其他的没有什么需要注意的但是要记住自己安装的目录接下来配置需要用到
安装完成后找到所安装的位置在node_modules同级目录下创建以下两个文件夹 然后winr打开命令行输入以下代码并回车
注意这里的文件位置是你自己上一步所创建的文件的所在路径就是 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 registryhttp://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\28104npm i vant/weapp -S --production npm WARN config production Use --omitdev 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! Its 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.json或index.json中引入组件即可使用
