vue-loader 细节

vue-loader 能根据 .vue 文件，导入一个vue组件。我这里从 vue-cli 的构建项目中抽取了vue-loader 一个小例子出来：vuedemo/demo02  

vue-loader 自带postcss的依赖，也就是说被引入的 .vue 组件中的css 会被postcss处理，但需要自己手动添加一个postcss的配置文件：

// .postcssrc.js
module.exports = {
  "plugins": {
    "autoprefixer": {}
  }
}

以上配置了自动添加浏览器前缀，能正常运行。

 

简要介绍下 postcss：

　　PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二个就是调用插件来处理 AST 并得到结果。以上就是使用的autoprefixer插件，处理的效果如下：

#content {
 display: flex;
}

// after
#content {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

　　由于 CSS 规范的制定和完善一般需要花费比较长的时间，浏览器厂商在实现某个 CSS 新功能时，会使用特定的浏览器前缀来作为正式规范版本之前的实验性实现。比如 Webkit 核心的浏览器使用-webkit-，微软的 IE 使用-ms-。为了兼容不同浏览器的不同版本，在编写 CSS 样式规则声明时通常需要添加额外的带前缀的属性

　　

资料参考：

　　https://vuejs.org/v2/guide/installation.html

　　https://webpack.js.org/configuration/resolve/

　　vue的库文件分为两大类：compiler和runtime。前者用于把template（template选项以及 .vue 文件中template区域）编译到render函数中，而后者仅仅支持vue框架的运行处理，不支持前者的模板转换过程，运行时最终执行的都是render函数。

　　所以，如果按中不包含template，就可以仅仅引入runtime库就可以了，否则要引入full（compiler + runtime）

　　对于以上仓库中的例子，如果不在webpack配置文件中指定引入 full版本的文件 ：

 resolve: {
        extensions: [".vue",".js",".json"],
        alias: {
            'vue$': 'vue/dist/vue.js',
        }
    },

打包后运行就会出现这个错误：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

因为默认引入vue的是runtime版，不支持 .vue 文件中的template转换。

 

https://cn.vuejs.org/v2/guide/render-function.html

https://cn.vuejs.org/v2/guide/deployment.html

使用vue单文件组件都是通过vue-loader来引入的，这里记录一些细节

自动实现了template到render函数的转换

　　在一个vue组件中，组件的html代码可以通过template属性或render函数来指定，两者的区别在于，template会转换为render函数来执行，也就是说最终执行的都是render函数。

所以在生产环境中，可以先进行编译，这样生产环境中运行就不再需要动态转换，性能可以提高一些。

　　vue-loader默认做了这个转换过程，打包后的bundle文件有如下代码 ：

//...
"use strict";
var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", { staticClass: "wrapper" }, [
    _c("div", { staticClass: "container" }, [
      _vm.loginPage
        ? _c(
            "form",
            {
              attrs: { action: "" },
              on: {
                submit: function($event) {
                  $event.preventDefault()
                  _vm.login($event)
                }
              }
            },
// ....

　　.vue （单文件组件）中的template已经被转换了。实现以上过程实际上是vue-loader 内 调用了vue-template-compiler 。在vue-loader/template-compiler/index.js 中有对vue-template-compiler 进行引用

处理css

　　.vue 文件中 style表内的样式默认都是通过js动态写入到head中，如果这个js较慢才执行，则屏幕可能出现闪屏现象，而且对浏览器缓存不友好。解决办法是使用extract-text-webpack-plugin插件。

启用scss

The vue config in webpack-simple works for lang="scss" (after installing sass-loader and node-sass), but it does not include the ExtractTextPlugin.

只需要安装sass-loader 和 node-sass 之后在style标签上添加一个lang="scss"即可