vue学习教程之带你一步步详细解析vue-cli


Posted in Javascript onDecember 26, 2017

vue-cli

在开发前,我们要至少通读一遍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,以免之后改版之后,误导读者。

之后,附上自己的目录截图,并没有做改动,如图:

vue学习教程之带你一步步详细解析vue-cli 

首先,第一个问题,从何看起呢?当然,是从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: '/',
 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本地服务器启动时,打包的一些配置, 代码如下:

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 /**
 * Source Maps
 */
 productionSourceMap: true,
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
 }

其中包括模版文件的修改,打包完目录之后的一些路径设置,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

这个文件中的代码非常的少,我们可以直接贴上代码,然后来分析,其中的作用。代码如下:

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
 ? config.build.productionSourceMap
 : config.dev.cssSourceMap
module.exports = {
 loaders: utils.cssLoaders({
 sourceMap: sourceMapEnabled,
 extract: isProduction
 }),
 cssSourceMap: sourceMapEnabled,
 cacheBusting: config.dev.cacheBusting,
 transformToRequire: {
 video: ['src', 'poster'],
 source: 'src',
 img: 'src',
 image: 'xlink:href'
 }
}

其中,主要就是根据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的基础配置信息。我们可以逐一字段进行分析:

  • context => 运行环境的上下文,就是实际的目录
  • entry => 入口文件:src下的main.js文件
  • output => 输出内容,这内部的配置会根据不同的运行环境来进行变化
  • resolve => 其中的extensions字段,指定检测的文件后缀,同时alias是用于指定别名的。在引用文件路径中,如果有别名的符号,会被替换成指定的路径。
  • module => 配置了一些eslint、vue、js、图片资源、字体图标、文件等加载的loader。详细的可以去看webpack的官方网站。
  • node => 此处部分有注释,主要是阻止一些webpack的默认注入行为,因为在vue中,已经具备了这些功能。

看完这些,你或许对webapck.base.conf.js中的内容有了一些初步的了解。其实,看懂它还需要你了解webpack这个非常有用的打包工具。

之后,我们在来回看webpack.dev.conf.js这个文件

webpack.dev.conf.js

这个文件中,引用了webapck-merge这npm包,它可以将两个配置对象,进行合并。代码如下:

const merge = require('webpack-merge');
const devWebpackConfig = merge(baseWebpackConfig, {
 ...
}

这样就合并了base中的webpack配置项。之后,我们可以来看一下dev环境中的新增了那些配置项,它们分别起到了什么作用?

  • 首先,在module的rules中增加了cssSourceMap的功能
  • 然后就是devtools,通过注释的英文翻译,可以知道cheap-module-eval-source-map使得开发更快。
  • 之后,就是devSever的一些配置项了。其中包块客户端报错级别、端口、host等等
  • 还有新增的plugins,我们可以来看一下实际新增的plugins(具体可以看webpack文档):
    定义process.env
    HotModuleReplacementPlugin: 模块热替换插件
    NameModulesPlugin: 显示模块加载相对路径插件
    NoEmitOnErrorsPlugin: 在编译出现错误时,使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误
    HtmlWebpackPlugin: 使用插件生成一个指定的模版。

后,还有一个函数,确保启动程序时,如果端口被占用时,会通过portfinder来发布新的端口,然后输出运行的host字符串。

webpack.prod.conf.js

这是打包到生产环境中,会被用到的文件。我们可以看到,它相对于之前的webapck.dev.conf.js文件少了一些插件,多了更多的插件。我们也可以和之前一样,通过它新增的一些东西,来知道它到底干了什么!(此处的新增是相对于webpack.dev.conf.js没有的内容)

  • 新增了output的配置,我们可以看到它在output中新增了一些属性,将js打包成不同的块chunk,然后使用hash尾缀进行命名
  • 添加了一些插件:
    UglifJsPlugin: 这个是用来丑化js代码的
    ExtractTextplugin: 这里新增了一些属性,在打包的css文件也增加了块和hash尾缀
    OptimizeCssplugin: 这里是来优化css文件的,主要就是压缩css代码
    HashedModuleIdsPlugin: 保证module的id值稳定
    optimize: 这里是webpack一系列优化的措施,具体可以逐一查看官方文档
    CopyWebPlugins: 自定义assets文件目录
  • 如果没有进行gzip压缩,调用CompressionWebpackPlugin插件进行压缩

这样,我们的webpack配置文件内容基本上就全部看完了。或许,会有点蒙,还是看官方文档来的实在。

最后,还需要分析一个build.js文件。

build.js

这个文件是在打包的时候,会被用到的。

首先,文件的开头请求了check-version.js中的函数,然后确定了一下node和npm的版本。相对于较低版本的node和npm,在打包过程中,会产生警告。之后,设置环境参数,设置成生产环境,之后就是一系列打包的流程。

总结

本篇文章,主要总结了一下vue-cli生成的文件中,其中的一些配置参数和文件大致的作用。有不到位的地方,希望大家可以指正。同时希望我们共同进步,共勉。

Javascript 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
快速入门Vue
Dec 19 Javascript
js a标签点击事件
Mar 30 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 #Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 #Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 #Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 #Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 #Javascript
You might like
PHP $_SERVER详解
2009/01/16 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
详细介绍Python中的偏函数
2015/04/27 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
车间统计员岗位职责
2014/01/05 职场文书
大学生村官工作感言
2014/01/10 职场文书
员工评语大全
2014/01/19 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
排查整治工作方案
2014/06/09 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
用Java实现简单计算器功能
2021/07/21 Java/Android
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis