首页 > 其他分享 >uniapp如何支持npm下载

uniapp如何支持npm下载

时间:2023-04-09 16:55:06浏览次数:40  
标签:npm uniapp node 初始化 package json 安装 下载

首先一个正常的Nodejs项目都会有package.json
简单的说,在早期的前端领域中其实没有组件化,模块化这种概念,直到nodejs中引入了模块,它认为 一个模块就是一个库或者一个框架(比如文件处理模块fs模块),当模块化出现之后,为了 管理这些模块,或者说 为了描述这个模块,package.json 应运而生,至于为什么它的格式是json,那是因为json格式 它在文本数据交换格式领域中有着绝对的统治地位,几乎所有的动态编程语言都支持json,或者说可以通过包来编译和解码json,下面这个就是一个正常的 package.json 中记录的具体内容;

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "serve": "npm run dev",
    "dev": "vite --open",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@types/axios": "^0.14.0",
    "axios": "^0.27.2",
  },
  "devDependencies": {
    "eslint": "^8.14.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "typescript": "^4.5.4",
  }
}

另外,当npm安装好的依赖包会被放入一个叫做:node_modules 的文件夹,也就是说,这个文件夹内的每一个文件夹都是一个依赖,具体的 node_modules文件夹 如下所示:

反过来,如果一个用现代框架构建的项目,发现它并没有 node_modules 的文件夹,这也就代表当前这个项目还没有进行安装,需要执行命令
npm install
简单的小结一下:package.json 就是npm的的配置文件,当我们使用npm下载包的时候,下载的包的信息会被同步记录在 package.json 文件中,具体的包会被存储在 node_modules 这个文件夹内,另外 node_modules 文件夹内的依赖包和在 package.json 中的记录值是一一对应的;
uniapp这个项目在HBuilder X创建时是不会有node_modules文件夹的,但是uni-app不管是基于哪个的框架,它内部一定是有node.js的,否则它没有办法去实现框架层面的一些东西,只是说它略微有点差异,具体差异表现在和web项目相比或者说和vue-cli相比: vue-cli构建好项目框架后会自动在当前工程下生成一个 node_modules 文件夹以及其对应的package.json文件,而 uni-app则不会自动生成,演示图如下:

因此,如果想要在uni-app的项目中使用npm,首先要做的就是对项目进行npm相关的初始化
初始化npm:
初始化的过程其实也非常简单,一共两步,当然,初始化的前提是电脑必须安装nodeJS的环境,如果没有安装nodeJS,前往nodeJS官网,自行选择安装包进行下载,nodeJS官网地址如下:NodeJS官网地址,下载完后,进行双击安装即可,安装步骤还是非常傻瓜式的~
话说回来,初始化npm的过程一共分为两步:

  • 第一步:cd到需要运行初始化命令的项目目录,我们需要在这个项目的根目录执行初始化命令;
  • 第二步:执行初始化命令:npm init
    第一步就不多说了,主要是第二步,当在控制台执行完
    npm init
    之后,它会在控制台让你输入一些选项,这些选项无非就是让你确认一下项目名、版本号等等,对于不确定的都可以不管,因为这些值都 可以在最终的package.json里进行修改,初始化时的示例图大致如下:

    当初始化完成后,node会在当前路径下生成一个package.json文件,具体如示例图所示:

这个文件生成即代表npm初始化成功
安装命令说明:
既然package.json文件已经生成,那么即可开始安装第三方依赖包,不过在此之前,必须 先了解一下安装命令,在npm中安装命令如下:
npm install packageName --save
这是一段完成的npm安装命令,我们可以将 其分为4段,分别是:npm,install,packageName 和 --save

  • npm:代表 npm工具,也就是说接下来要执行的是属于npm的命令;
  • install:代表 安装,这是一个属于npm的内置关键词;
  • packageName:这是一个变量,代表 包名,具体示例如下 ,官方包名,
  • -–save:代表 保存,被–save的包会被记录到 package.json 中的 dependencies属性 下(这个属性代表项目被打包时该属性下的所有依赖包要一同被打进项目包里);
// 安装uView
npm install uView -–save

// 安装lodash
npm install lodash -–save

安装后就可以按照包名的官方文档进行操作了

标签:npm,uniapp,node,初始化,package,json,安装,下载
From: https://www.cnblogs.com/lzp110119/p/17300567.html

相关文章

  • eeglab 下载超详细步骤(小白适用)
    eeg下载地址: https://eeglab.org/随便填一填~ 下载好了:(科学上网前提下+不用迅雷,浏览器自带下载器下载,好像要更快一点,大小为89.2M) ......
  • uniapp如何下载video.js
    在uni-app中引入video.js有两种方式1.通过cdn的方式引入(不建议,当这个cdn失效时,你的业务可能就崩了)<linkhref="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css"rel="stylesheet"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vide......
  • 解决前端启动报错:This is probably not a problem with npm. There is likely additio
    在执行npmrundev运行项目的时候报错:{"os":"darwin","arch":"any"}(current:{"os":"win32","arch":"x64"})npmERR!codeELIFECYCLEnpmERR!errno1npmERR!phantomjs-prebuilt@2.1.16in......
  • cnpm安装appium出现cannot find module xxx
    背景,我的电脑MacBookproM1芯片,brew安装了npm,再通过npm安装了cnpm,但是通过cnpm安装appium时候总会出现cannotfindmodulexxx,然后又对xxx再cnpm安装,再安装appium又出现新的xxx,网上找了很多方法,都没有对症下药的办法,最后像一个法子,直接干脆通过npm指定阿里镜......
  • npm install报错 npm ERR! 的四种解决办法
    整理了自己在安装过程中碰到的四种npmERR及解决方式错误一、npmERR!Acompletelogofthisruncanbefoundin:npmERR!C:\Users\nanyi\AppData\Roaming\npm-cache_logs\2021-09-17T08_58_23_413Z-debug.l查看错误日志,错误日志就在上面展示的C:\Users…这里如果发现错误日......
  • pikachu靶场任意文件下载漏洞
    任意文件下载漏洞位置点击链接可以直接下载文件右键选择复制链接使用相对路径进行访问,可以下载任意文件../表示的就是一层目录但是也可以读取一些类型的文件内容如果关闭post提交则会继续下载文件......
  • Sqoop下载安装配置
    下载Sqoop下载地址:https://archive.apache.org/dist/sqoop/安装Sqoop将Sqoop包上传,这里使用了Xftp进入Sqoop安装包目录,安装tar-zxvfsqoop-1.4.7.bin__hadoop-2.6.0.tar.gz为了方便,可以对Sqoop目录重命名mvsqoop-1.4.7.bin__hadoop-2.6.0sqoop配置环境变量vim/et......
  • LYT-C#-网络调试助手下载
    (25条消息)调试工具之UDP/TCP网络调试助手NetAssist_随意一局-小猩猩的博客-CSDN博客下载地址链接:https://pan.baidu.com/s/1az9ogJQrb4TqWK632cvCdw 密码:k6wp......
  • npm i 安装报错RequestError: socket hang up
    1异常信息npmWARNdeprecated@npmcli/[email protected]:Thisfunctionalityhasbeenmovedto@npmcli/[email protected]:Pleaseuse@electron/asarmovingforward.ThereisnoAPIchange,justapackagenamechangenpmERR!code1npmERR!pat......
  • DBGridEH11学习EhLib11的下载和安装(01)
    链接:https://pan.baidu.com/s/1HBw6AEzOXQgS2MIhh-ovhw提取码:iuuw安装  目录里Demos和Hlp文件夹, ......