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

上次给大家分享的是用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日