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


Posted in Javascript onJuly 04, 2017

使用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" 
 ] 
}

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

Javascript 相关文章推荐
Javascript 刷新全集常用代码
Nov 22 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 #Javascript
详解node如何让一个端口同时支持https与http
Jul 04 #Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 #Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 #Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 #Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
python文件比较示例分享
2014/01/10 Python
Python AES加密实例解析
2018/01/18 Python
python队列queue模块详解
2018/04/27 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python tcp传输代码实例解析
2020/03/18 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python 多进程、多线程效率对比
2020/11/19 Python
python 模拟登录B站的示例代码
2020/12/15 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
天鹅的故事教学反思
2014/02/04 职场文书
农业生产宣传标语
2014/10/08 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
MySql数据库触发器使用教程
2022/06/01 MySQL
OpenFeign实现远程调用
2022/08/14 Java/Android