文章注重过程描述,不具备技术深度。

系列文章地址:

一、描述

之前一篇文章支持了 webpack-dev-server、html 模板、ES6语法等,但是目前为止,编写 vue 组件的时候,还是使用的是纯对象的形式输出的对象内容,并没有支持 xxx.vue 这种组件文件的编写方式,另外对于 css 等的支持也有一定的问题。

二、 支持 vue 文件编译

1、工程和开发的变动

首先对工程的目录结构做个调整,基本上属于比较规范的形式:

1.jpg

其中 main.js 还是入口文件, 只不过渲染节点的形式发生了变动,通过 render 的形式渲染节点,而不是 template

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: (c) => {return c(App)}
});

./App.vue 则是入口组件,形式就是 template 组件开发形式:

<template>
  <div>
    <h1>{{title}}</h1>
  </div>  
</template>

<script>
  export default {
    data() {
      return {
        'title': 'Hello World!'
      }
    }
  }
</script>

<style scoped>
  h1 {
    color: #ff5000;
  }
</style>

2、webpack 的变动

首先安装 vue-loader,然后添加到 modules 的配置中

yarn add vue-loader -D
{
  test: /\.(vue)$/,
  use: ['vue-loader']
}

如果此时直接编译,会报错如下:

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

2.jpg

这是因为 vue-loader 需要依赖一个本身提供的一个插件 VueLoaderPlugin

从 vue-loader 中引入插件:

const { VueLoaderPlugin } = require('vue-loader');

添加到 webpack 的 plugins 配置中:

    new VueLoaderPlugin(),

如果此时直接编译,还是会报错如下:

vue-template-compiler must be installed as a peer dependency

3.jpg

然后就能够正常的编译 .vue 模板文件,并且最终输出到页面上。

4.jpg

三、postcss

autoprefixer 的文档:https://github.com/autoprefixer

css 尤其是 css3 的一些属性是需要进行浏览器适配的,而 postcss 已经帮我们完成了这个工作,在编译的时候,会直接注入浏览器需要适配的那些属性,我们只需要关注业务即可,非常方便。

而在 webpack 中可以借助 postcss-loader 这个 loader 即可。

yarn add -D postcss-loader

postcss 是需要有单独的配置文件放在项目根目录的:默认名称为 postcss.config.js,因为我只需要 autoprefixer 而不需要其他复杂的支持,因此我只安装了 autoprefixer 这个插件,并在 postcss.config.js 中配置了

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

然后修改 webpack 的配置文件,直接加载 css-loader 上即可

{
        test: /\.css$/,
        use: [ 
          { loader: 'style-loader', options: { sourceMap: true } },
          { loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } },
          { 
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            }
          }
        ]
      }    

示例 css :

  .wrapper {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
  }

编译之后:

.wrapper[data-v-7ba5bd90] {
    display: grid;
    transition: all .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

效果:

5.jpg

三、引入文件后缀省略

目前引入文件的后缀中,我们还是写明了是 xxx.js xxx.vue ,需要配置 webpack 支持需要引入 xxx.js 也能够引入。

通过 webpack 配置 resolve.extensions, 来指定文件后缀省略的优先级:

  resolve: {
    extensions: ['.js', '.vue']
  },

比如之前是:

import App from './App.vue';

而之后引入则变成:

import App from './App';

关于 resolve 的配置选项还有很多,比如 vue-cli 的 @ 别名等,更多见文档:

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

四、github

本篇文章及项目目录的 github 地址为: