详解vue-cli 脚手架项目-package.json

发布时间 - 2026-01-11 02:10:27    点击率:

使用vue-cli脚手架新建的项目中,含有package.json。

package.json是npm的配置文件,里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。

{ 
 "name": "vue-manage", // 项目名称 
 "version": "1.0.0", // 版本  
 "description": "Reimbursement Manage", // 描述  
 "author": "LXG", // 作者  
 "private": true, //是否私人项目  
 "scripts": { 
  "dev": "node build/dev-server.js", // npm run dev 的 dev,使用node执行 build/dev-server.js 
  "start": "node build/dev-server.js", // npm run start 跑的是同样的命令 
  "build": "node build/build.js", // npm run build 跑的是 node build/build.js // 以下脚本为单元测试用到的脚本 
  // 以下脚本为单元测试用到的脚本 
  "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 
  "e2e": "node test/e2e/runner.js", 
  "test": "npm run unit && npm run e2e" 
 }, 
 "dependencies": { // dependencies 设定的是项目里使用的依赖 
  "vue": "^2.2.6", 
  "vue-router": "^2.3.1", 
  "element-ui": "1.3.1", 
  "vue-datasource": "1.0.9", 
  "axios": "^0.15.3", 
  "vue-core-image-upload": "2.1.5", 
  "mockjs": "^1.0.1-beta3", 
  "babel-polyfill": "^6.23.0" 
 }, 
 "devDependencies": { //devDependencies设定的是开发使用的依赖  
  "autoprefixer": "^6.7.2", // 是用于给css3属性自动加属性前缀的 
  "babel-core": "^6.22.1", // babel相关的都是用于处理es6语法的 
  "babel-loader": "^6.2.10", 
  "babel-plugin-transform-runtime": "^6.22.0", 
  "babel-preset-env": "^1.3.2", 
  "babel-preset-stage-2": "^6.22.0", 
  "babel-register": "^6.22.0", 
  "chalk": "^1.1.3", // chalk适用于格式化输出命令行信息的,比如run dev以后的start...  
  "connect-history-api-fallback": "^1.3.0", 
  "copy-webpack-plugin": "^4.0.1", 
  "css-loader": "^0.28.0", // 所有的*-loader都是 webpack的扩展,webpack是把各种资源理解为一个模块,css-loader就是读取css模块的加载器 
  "eslint": "^3.19.0", // eslint 相关是代码格式化检查工具,开启以后要严格遵照它规定的格式进行开发 (我一般把它关了,为了显示特意加上的) 
  "eventsource-polyfill": "^0.9.6", 
  "express": "^4.14.1", // express 用于启动 node http server的服务  
  "extract-text-webpack-plugin": "^2.0.0", 
  "file-loader": "^0.11.1", 
  "friendly-errors-webpack-plugin": "^1.1.3", 
  "html-webpack-plugin": "^2.28.0", // webpack 里载入和处理html的插件 
  "http-proxy-middleware": "^0.17.3", // node server 的中间件工具 
  "webpack-bundle-analyzer": "^2.2.1", 
  "cross-env": "^4.0.0", // 设定环境变量的工具,NODE_ENV变量跟它有关 
  "karma": "^1.4.1",  // karma相关的都是单元测试工具 
  "karma-coverage": "^1.1.1", 
  "karma-mocha": "^1.3.0", 
  "karma-phantomjs-launcher": "^1.0.2", 
  "karma-phantomjs-shim": "^1.4.0", 
  "karma-sinon-chai": "^1.3.1", 
  "karma-sourcemap-loader": "^0.3.7", 
  "karma-spec-reporter": "0.0.30", 
  "karma-webpack": "^2.0.2", 
  "lolex": "^1.5.2", 
  "mocha": "^3.2.0", 
  "chai": "^3.5.0", 
  "sinon": "^2.1.0", 
  "sinon-chai": "^2.8.0", 
  "inject-loader": "^3.0.0", 
  "babel-plugin-istanbul": "^4.1.1", 
  "phantomjs-prebuilt": "^2.1.14", 
  "chromedriver": "^2.27.2", 
  "cross-spawn": "^5.0.1", 
  "nightwatch": "^0.9.12", 
  "selenium-server": "^3.0.1", // 一个版本检查工具  
  "semver": "^5.3.0", // selljs是在node里跑shell命令的工具,比如‘rm -rf'  
  "shelljs": "^0.7.6", 
  "opn": "^4.0.2", // 跨平台的开启文件或者网页的工具 
  "optimize-css-assets-webpack-plugin": "^1.3.0", 
  "ora": "^1.2.0", // 命令行里自动运行的信息提示  
  "rimraf": "^2.6.0", // 跑shell命令 rm-rf 的工具  
  "url-loader": "^0.5.8", // 配合webpack的加载器  
  "vue-loader": "^11.3.4", // 配合webpack的加载器  
  "vue-style-loader": "^2.0.5", // 配合webpack的加载器  
  "vue-template-compiler": "^2.2.6", // vue-template-compiler,可能是配合离线版vue  
  "webpack": "^2.3.3", // webpack相关的用于,把图片,*.vue, *.js, 这些组合成最终的项目,webpack-dev用于跑测试服务器  
  "webpack-dev-middleware": "^1.10.0", 
  "webpack-hot-middleware": "^2.18.0", 
  "webpack-merge": "^4.1.0", 
  "babel-preset-es2015": "^6.22.0", 
  "function-bind": "^1.1.0", 
  "webpack-bundle-analyzer": "^2.2.1"   
 },  // 项目依赖的引擎版本  
 "engines": { 
  "node": ">= 4.0.0", 
  "npm": ">= 3.0.0" 
 }, 
 "browserslist": [ 
  "> 1%", 
  "last 2 versions", 
  "not ie <= 8" 
 ] 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


# vue  # cli  # package.json  # vue2.0  # npm如何更新VUE package.json文件中依赖的包版本  # Vue package.json配置深入分析  # vue package.json文件的使用及说明  # 的是  # 都是  # 加载  # 命令行  # 单元测试  # 离线  # 是在  # 我一  # 适用于  # 把它  # 定了  # 写在  # 关了  # 要严格  # 配置文件  # 大家多多  # 自动运行  # 测试工具  # autoprefixer  # devDependencies 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 网站制作企业,网站的banner和导航栏是指什么?  如何快速搭建高效服务器建站系统?  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  Laravel如何操作JSON类型的数据库字段?(Eloquent示例)  焦点电影公司作品,电影焦点结局是什么?  如何用y主机助手快速搭建网站?  北京的网站制作公司有哪些,哪个视频网站最好?  Laravel如何使用Facades(门面)及其工作原理_Laravel门面模式与底层机制  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  javascript中闭包概念与用法深入理解  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  如何在香港免费服务器上快速搭建网站?  html5的keygen标签为什么废弃_替代方案说明【解答】  Android自定义控件实现温度旋转按钮效果  Laravel全局作用域是什么_Laravel Eloquent Global Scopes应用指南  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  晋江文学城电脑版官网 晋江文学城网页版直接进入  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  昵图网官方站入口 昵图网素材图库官网入口  Android实现代码画虚线边框背景效果  java获取注册ip实例  学生网站制作软件,一个12岁的学生写小说,应该去什么样的网站?  再谈Python中的字符串与字符编码(推荐)  香港网站服务器数量如何影响SEO优化效果?  JavaScript模板引擎Template.js使用详解  php json中文编码为null的解决办法  网站广告牌制作方法,街上的广告牌,横幅,用PS还是其他软件做的?  Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】  Laravel如何与Pusher实现实时通信?(WebSocket示例)  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  Windows10如何删除恢复分区_Win10 Diskpart命令强制删除分区  Python并发异常传播_错误处理解析【教程】  Laravel如何配置和使用缓存?(Redis代码示例)  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  Laravel用户密码怎么加密_Laravel Hash门面使用教程  手机软键盘弹出时影响布局的解决方法  Swift中swift中的switch 语句  Laravel如何处理文件下载请求?(Response示例)  Laravel如何记录日志_Laravel Logging系统配置与自定义日志通道  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  Laravel定时任务怎么设置_Laravel Crontab调度器配置  Laravel如何生成API文档?(Swagger/OpenAPI教程)  laravel怎么使用数据库工厂(Factory)生成带有关联模型的数据_laravel Factory生成关联数据方法  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复