详解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 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 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
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
清除输入框内的空格
2016/12/21 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
歌颂祖国演讲稿
2014/05/04 职场文书
励志演讲稿600字
2014/08/21 职场文书
药店采购员岗位职责
2014/09/30 职场文书
2014年文员工作总结
2014/11/18 职场文书
JavaScript设计模式之原型模式详情
2022/06/21 Javascript