【vue系列之二】详解vue-cli 2.0配置文件

来源：互联网发布：保定云计算培训编辑：程序博客网时间：2024/05/16 19:09

上次给大家分享的是用vue-cli快速搭建vue项目，虽然很省时间和精力，但想要真正搞明白，我们还需要对其原理一探究竟。

大家拿到一个项目，要快速上手，正确的思路是这样的：

首先，如果在项目有readme.md的情况下，大家要先读readme，项目的一些基本介绍，包括项目信息、运行的脚本、采用何种框架，以及项目维护者等信息通常都会有。一般在git上维护的项目都会有readme.md，不熟悉markdown语法的同学可以先了解下markdown入门。

第二步，要看package.json。现代的前端项目中通常都会有package.json文件。在package.json里，会介绍项目名称、版本、描述、作者、脚本、依赖包，对环境的要求，以及对浏览器要求。

 1 { 2   "name": "uccn", 3   "version": "1.0.0", 4   "description": "uccn3.0", 5   "author": "v_yangtianjiao <v_yangtianjiao@baidu.com>", 6   "private": true,
　　　// 这里的脚本是分析项目的主要入口 7   "scripts": { 8     "dev": "node build/dev-server.js", 9     "start": "node build/dev-server.js",10     "build": "node build/build.js",11     "jsonp": "node build/jsonp-server.js"12   },
　　　// 项目依赖13   "dependencies": {14     "fetch-jsonp": "^1.1.3",15     "less": "^2.7.2",16     "less-loader": "^4.0.4",17     "stylus": "^0.54.5",18     "stylus-loader": "^3.0.1",19     "vue": "^2.4.2"20   },21   "devDependencies": {22     "autoprefixer": "^7.1.2",23     "babel-core": "^6.22.1",24     "babel-loader": "^7.1.1",25     "babel-plugin-component": "^0.10.1",26     "babel-plugin-transform-runtime": "^6.22.0",27     "babel-preset-env": "^1.3.2",28     "babel-preset-es2015": "^6.24.1",29     "babel-preset-stage-2": "^6.22.0",30     "babel-register": "^6.22.0",31     "chalk": "^2.0.1",32     "connect-history-api-fallback": "^1.3.0",33     "copy-webpack-plugin": "^4.0.1",34     "css-loader": "^0.28.0",35     "cssnano": "^3.10.0",36     "eventsource-polyfill": "^0.9.6",37     "express": "^4.14.1",38     "extract-text-webpack-plugin": "^2.0.0",39     "file-loader": "^0.11.1",40     "friendly-errors-webpack-plugin": "^1.1.3",41     "html-webpack-plugin": "^2.28.0",42     "http-proxy-middleware": "^0.17.3",43     "opn": "^5.1.0",44     "optimize-css-assets-webpack-plugin": "^2.0.0",45     "ora": "^1.2.0",46     "rimraf": "^2.6.0",47     "semver": "^5.3.0",48     "shelljs": "^0.7.6",49     "url-loader": "^0.5.8",50     "vue-loader": "^13.0.4",51     "vue-style-loader": "^3.0.1",52     "vue-template-compiler": "^2.4.2",53     "webpack": "^2.6.1",54     "webpack-bundle-analyzer": "^2.2.1",55     "webpack-dev-middleware": "^1.10.0",56     "webpack-hot-middleware": "^2.18.0",57     "webpack-merge": "^4.1.0"58   },
     // 对node版本的以及npm版本的要求59   "engines": {60     "node": ">= 4.0.0",61     "npm": ">= 3.0.0"62   },
　　　// 浏览器要求，vue项目不支持ie8，因为ie8是es3，尚没有Object.defineProperty属性63   "browserslist": [64     "> 1%",65     "last 2 versions",66     "not ie <= 8"67   ]68 }

上面的package.json是从实际vue项目中摘出来的，大家从package.json中就会对项目有一个大概的了解，最主要的是脚本部分。通过npm的自动化任务，可以很方便的执行配置文件中的脚本。通过配置 "jsonp": "node build/jsonp-server.js"，可以方便的使用npm run jsonp命令，代替node build/jsonp-server.js或者更复杂的一系列命令。详细的npm自动化命令可以移步npm 自动化。

【本文由“程序员的日常”发布，2017年10月12日

阅读全文

1 0