vue学习教程之带你一步步详细解析vue-cli
vue-cli在开发前，我们要至少通读一遍vue官方文档和API(看官方文档是最重要的，胜过看五十、一百篇博客),英文阅读能力还行的建议阅读，中文文档内容会稍落后，还要通读相关的vue-router、axios、vuex等。 一般来说我们都是先利用vue-cli来搭建项目基本架构。 正文首先，我们来说一下安装的东西吧！处于有头有尾的目的，还是几句话草草了事。步骤如下： 安装vue-cli 以webpack模版安装目录 这样之后，我们就可以使用IDE打开目录了。 此处注明我的vue-cli的版本2.9.2，以免之后改版之后，误导读者。 之后，附上自己的目录截图，并没有做改动，如图：
首先，第一个问题，从何看起呢？当然，是从webpack.base.conf.js开始看起了。这个是dev和prod环境都会去加载的东西。然后，我们可以先从webpack.base.conf.js中会被用到的几个文件看起。其实，base中被用到了如下的文件，我们可以从代码中看出： 分别是：
path路径这个模块可以看nodejs官网的介绍，其实，就是一个文件路径的获取和设置等模块，学习node的时候，我们往往会看到这个模块被大量运用。 path模块提供了用于处理文件和目录路径的使用工具 utils.js我们可以到其中去看一下代码，其实光从名字上我们可以推断出，它可能是为整个脚手架提供方法的。我们可以先来看一下头部引用的资源文件： 同样的，它也引用了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中，设置了一些配置，代码如下： // 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本地服务器启动时，打包的一些配置， 代码如下： 其中包括模版文件的修改，打包完目录之后的一些路径设置，gzip压缩等。明白了这些字段的意思之后，就可以在之后的开发中，主动根据项目需求，改动目录内容。 聊完config下的index.js文件，回到utils.js文件中，我们可以来看几个其中的方法，来分析它们分别起到了什么作用。 1、assetsPath方法接受一个_path参数 返回static目录位置拼接的路径。 它根据nodejs的proccess.env.NODE_ENV变量，来判断当前运行的环境。返回不同环境下面的不同static目录位置拼接给定的_path参数。 2、cssLoaders方法接受一个options参数，参数还有的属性：sourceMap、usePostCSS。 同时，这里用到了我们之前提到的extract-text-webpack-plugin插件，来分离出js中的css代码，然后分别进行打包。同时，它返回一个对象，其中包含了css预编译器(less、sass、stylus)loader生成方法等。如果你的文档明确只需要一门css语言，那么可以稍微清楚一些语言，同时可以减少npm包的大小(毕竟这是一个令人烦躁的东西)。 3、styleLoaders方法接受的options对象和上面的方法一致。该方法只是根据cssLoaders中的方法配置，生成不同loaders。然后将其返回。 4、createNotifierCallback方法此处调用了一个模块，可以在GitHub上找到，它是一个原生的操作系统上发送通知的nodeJS模块。用于返回脚手架错误的函数 一共这么四个函数方法，在utils中被定义到。 回看到webpack.base.conf.js文件中，我们可以直接跳过config目录下的index.js文件，之前已经分析过了。直接来看一下vue-loader.conf.js下的内容。 vue-loader.conf.js这个文件中的代码非常的少，我们可以直接贴上代码，然后来分析，其中的作用。代码如下： 其中，主要就是根据NODE_ENV这个变量，然后分析是否是生产环境，然后将根据不同的环境来加载，不同的环境，来判断是否开启了sourceMap的功能。方便之后在cssLoaders中加上sourceMap功能。然后判断是否设置了cacheBusting属性，它指的是缓存破坏，特别是进行sourceMap debug时，设置成false是非常有帮助的。最后就是一个转化请求的内容，video、source、img、image等的属性进行配置。 具体的还是需要去了解vue-loader这个webpack的loader加载器。 分析了这么多，最终回到webpack.base.conf.js文件中 webpack.base.conf.js其实的两个方法，其中一个是来合并path路径的，另一个是加载Eslint的rules的。 我们直接看后面那个函数，createLintingRule方法： 其中，加载了一个formatter，这个可以在终端中显示eslint的规则错误，方便开发者直接找到相应的位置，然后修改代码。 之后的一个对象，就是webpack的基础配置信息。我们可以逐一字段进行分析：
看完这些，你或许对webapck.base.conf.js中的内容有了一些初步的了解。其实，看懂它还需要你了解webpack这个非常有用的打包工具。 之后，我们在来回看webpack.dev.conf.js这个文件 webpack.dev.conf.js这个文件中，引用了webapck-merge这npm包，它可以将两个配置对象，进行合并。代码如下： 这样就合并了base中的webpack配置项。之后，我们可以来看一下dev环境中的新增了那些配置项，它们分别起到了什么作用？
后，还有一个函数，确保启动程序时，如果端口被占用时，会通过portfinder来发布新的端口，然后输出运行的host字符串。 webpack.prod.conf.js这是打包到生产环境中，会被用到的文件。我们可以看到，它相对于之前的webapck.dev.conf.js文件少了一些插件，多了更多的插件。我们也可以和之前一样，通过它新增的一些东西，来知道它到底干了什么！(此处的新增是相对于webpack.dev.conf.js没有的内容)
这样，我们的webpack配置文件内容基本上就全部看完了。或许，会有点蒙，还是看官方文档来的实在。 最后，还需要分析一个build.js文件。 build.js这个文件是在打包的时候，会被用到的。 首先，文件的开头请求了check-version.js中的函数，然后确定了一下node和npm的版本。相对于较低版本的node和npm，在打包过程中，会产生警告。之后，设置环境参数，设置成生产环境，之后就是一系列打包的流程。 总结本篇文章，主要总结了一下vue-cli生成的文件中，其中的一些配置参数和文件大致的作用。有不到位的地方，希望大家可以指正。同时希望我们共同进步，共勉。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
