首页 > 其他分享 >Vue devDependencies 与 dependencies 能别

Vue devDependencies 与 dependencies 能别

时间:2024-05-31 15:11:25浏览次数:21  
标签:npm Vue 模块 -- dev install devDependencies save 能别

Vue devDependencies 与 dependencies 能别,如何往 项目的node_modules安装组件

概述

  • devDependencies
    • 用于本地环境开发
    • 只会在开发环境下依赖的模块,生产环境不会被打入包内(通过NODE_ENV=developementNODE_ENV=production指定开发还是生产环境)
  • dependencies
    • 用户发布环境
    • 不仅开发环境能使用,生产环境也能使用

安装

我们在使用 npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,他们是:--save-dev--save
不能将同一个包(例如vue),同时安装到dependencies和devDependencies 里面,他们是互斥的,只能二选一
npm install 模块名 --save-prod ,安装到 dependencies,
npm install 模块名 --save-dev ,这里的dev默认特指 devDependencies,

特别注意:npm run dev 的 dev 与 npm install 模块名 --save-dev 的 dev 不是一个东西,一点关系都没有
我们把 开发中需要执行的命令在 package.json 的 script 中定义成 dev,就可以直接通过 npm run dev 触发执行了
如下图将 dev 改成 vipdev
image

示例

dependencies
 装载:npm install vue  --save-prod
 卸载:npm uninstall vue  --prod

devDependencies
 装载:npm install vue  --save-dev
 卸载:npm uninstall vue  --dev
-P 相当于 --save-prod, 添加dependencies 里面所有的包。在 -D -O 不存在时,-P 就是默认值 。 也可以写全称:`--save-production`
-S 相当于 --save; 添加dependencies 里面所有的包。
-D 相当于 --save-dev; 添加devDependencies 里面所有的包,
-O 相当于 --save-optional, 添加在 optionalDependencies 里面的包,
--no-save: 阻止保存记录在dependencies 中

npm install 命令

npm install moduleName 命令

1. 安装模块到项目node_modules目录下。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -g moduleName 命令

1. 安装模块到全局,不会在项目node_modules目录中保存模块包。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -save moduleName 命令

1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入dependencies 节点。
3. 运行 npm install 初始化项目时,会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时,会自动下载模块到node_modules目录中。

npm install -save-dev moduleName 命令

1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入devDependencies 节点。
3. 运行 npm install 初始化项目时,会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时,不会自动下载模块到node_modules目录中。

标签:npm,Vue,模块,--,dev,install,devDependencies,save,能别
From: https://www.cnblogs.com/vipsoft/p/18224614

相关文章

  • vue3毫秒级时间戳转换
    Unix时间戳是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒。以下2个方法源自于时间工具包:timeutils效果展示:在线时间戳转换工具时间转时间戳/***将某个时间转化成时间戳*时间格式:2019-05-2000:00:00或2019年5月1日00:00:00*返回值:1556640000000,13......
  • vue3 vite 脚手架生成项目 prettier 自动格式化失败 vscode插件 Vue - Official 解决
    vue3vite脚手架生成项目prettier自动格式化失败vscode插件Vue-Official解决方案问题以前写的都是vue2的项目,自动格式化都用的vetur,都设置好了。现在新弄了个vue3的项目,脚手架起的vitevue3,搞个代码格式化,发现prettier没好事。解决思路格式化一共俩工具eslintpret......
  • 265:vue+openlayers 一次性清除所有控件(亲测好用)
    作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为GIS领域高级前端工程师;CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第265个示例文章目录一、示......
  • vue 导出xlsx (报错./cptable in ./node modules/xlsx-style/dist/cpexcel.js)
    安装 xlsx 和  xlsx-stylesrc下创建文件夹utils, utils文件夹下创建index.js文件,index.js文件内容如下:*CreatedbyAnqion16/11/18.*//***Parsethetimetostring*@param{(Object|string|number)}time*@param{string}cFormat*@returns{stri......
  • VUE卖座网
      免费获取方式↓↓↓   项目介绍033:项目名:卖座网技术栈:VUE网址:http://localhost:8080/功能(前端数据都为静态假数据,仅展示,实现动态需自行搭建后端)电影正在上映即将上映影院全城app订票最近去过资讯我的 二、技术栈 所有场景都支持适合零基础小......
  • vue小白商城
      免费获取方式↓↓↓   项目介绍034:npminstallnpmrunservenpmrunbuild主要功能小白商城首页我的消息收藏夹购物车卖家中心联乐客服关于我们 二、技术栈 所有场景都支持适合零基础小白练手和实战;适合二次开发;项目图片概览:以上是对本项目的界面......
  • 基于springboot+vue的音乐网站
      项目介绍025:前台:http://localhost:8081/#/后台:http://localhost:8080/#/前台账号:wang123后台账号:admin1项目功能音乐播放MV播放用户登录注册用户信息编辑、头像修改歌曲、歌单搜索歌单打分歌单、歌曲评论歌单列表、歌手列表分页显示歌词同步显示音乐收藏......
  • 校园周边美食探索及分享平台,基于 SpringBoot+Vue+MySQL 开发的前后端分离的校园周边美
    目录一.前言二.功能模块2.1. 前台首页功能模块2.2. 用户功能模块2.3. 管理员功能模块三.部分代码实现四.源码下载一.前言美食一直是与人们日常生活息息相关的产业。传统的电话订餐或者到店消费已经不能适应市场发展的需求。随着网络的迅速崛起,互联网日益成......
  • WebStorm + Vite3.0 + Vue2.7 前端断点调试
    WebStorm+Vite3.0+Vue2.7前端断点调试目录WebStorm+Vite3.0+Vue2.7前端断点调试使用工具版本1、添加调试配置2、启动调试问题参考使用工具版本WebStorm2023.2、NodeJsv16.20.2、Vue2.7.7、Vite3.0.2、JavaScript1、添加调试配置右上角选择编辑配置.新......
  • 在Vue3中,集成VueQuill Rich Text Editor for Vue 3
    官网地址:https://vueup.github.io/vue-quill/github:https://github.com/vueup/vue-quill没有中文包,胜在简单,步骤,按官网说明安装:npminstall@vueup/vue-quill@latest--save#ORyarnadd@vueup/vue-quill@latest在项目的\src\components\路径下建立 QuillEdito......