在开发前，我们要至少通读一遍vue官方文档和API(看官方文档是最重要的，胜过看五十、一百篇博客),英文阅读能力还行的建议阅读英文文档，中文文档内容会稍落后，还要通读相关的vue-router、axios、vuex等。
一般来说我们都是先利用vue-cli来搭建项目基本架构。
正文
首先，我们来说一下安装的东西吧！处于有头有尾的目的，还是几句话草草了事。步骤如下：
安装vue-cli
npm install vue-cli -g
以webpack模版安装目录
vue init webapck webpack-template
这样之后，我们就可以使用IDE打开目录了。
此处注明我的vue-cli的版本2.9.2，以免之后改版之后，误导读者。
之后，附上自己的目录截图，并没有做改动，如图：
首先，第一个问题，从何看起呢？当然，是从webpack.base.conf.js开始看起了。这个是dev和prod环境都会去加载的东西。然后，我们可以先从webpack.base.conf.js中会被用到的几个文件看起。其实，base中被用到了如下的文件，我们可以从代码中看出：
'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf')
分别是：
path 【路径模块】
build目录中的utils.js文件
config目录中的index文件
build目录中的vue-loader.conf.js文件
path路径
这个模块可以看nodejs官网的介绍，其实，就是一个文件路径的获取和设置等模块，学习node的时候，我们往往会看到这个模块被大量运用。
path模块提供了用于处理文件和目录路径的使用工具
utils.js
我们可以到其中去看一下代码，其实光从名字上我们可以推断出，它可能是为整个脚手架提供方法的。我们可以先来看一下头部引用的资源文件：
const path = require('path') const config = require('../config') const ExtractTextPlugin = require('extract-text-webpack-plugin') const packageConfig = require('../package.json')
同样的，它也引用了path模块和config目录中的index.js文件，之后的话是一个npm包——extract-text-webpack-plugin。这个包的话，是用来分离css和js的内容的。后续我们可以详细了解一下。同时，它还引用的package.json文件，这是一个json文件，加载过来之后，会变成一个对象。
所以，我们需要从它的头部依赖开始说起：
path模块我们之前提到过，这里就不细说。我们可以来分析一下config目录下的index.js文件。
index.js
这个文件中，其实有十分充足的代码注释，我们也可以来深入探究一下。
从代码中，我们可以看到通过module.exports导出了一个对象，其中包含两个设置dev和build。
在dev中，设置了一些配置，代码如下：
modules.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: 'https://www.jb51.net/', proxyTable: {}, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: true, // If true, eslint errors and warnings will also be shown in the error overlay // in the browser. showEslintErrorsInOverlay: false, /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false, } }
通过它的注释，我们可以理解它在dev中配置了静态路径、本地服务器配置项、Eslint、Source Maps等参数。如果我们需要在开发中，改动静态资源文件、服务器端口等设置，可以在这个文件中进行修改。
下面还有一个build的对象，它是在vue本地服务器启动时，打包的一些配置， 代码如下：