说说如何利用 Webpack 来搭建 Vue 单文件组件环境

时间 2019-11-26

标签说说如何利用 webpack 搭建 vue 文件组件环境繁體版

原文原文链接

首先必须先安装与配置好 Webpack。可参考如下内容：css

.vue 单文件组件：是一个后缀名为 .vue 的文件，咱们能够利用 Webpack 的 vue-loader 插件来处理 *.vue 的文件。前端

1 安装加载器

使用 npm 安装 vue-loader、vue-style-loader、babel 以及 babel-loader 等加载器（之因此要加载最后两个加载器，是为了支持 ES6 语法）。vue

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader@7
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime
复制代码

对应安装的加载器版本是：node

vue@2.6.8
vue-loader@15.7.0
vue-style-loader@4.1.2
vue-template-compiler@2.6.8
vue-hot-reload-api@2.3.3
babel@6.23.0
babel-loader@7.1.5
babel-core@6.26.3
babel-plugin-transform-runtime@6.23.0
babel-preset-es2015@6.24.1
babel-runtime@6.26.0

注意： 由于咱们安装的 babel 是 6.x 版本，而它所对应的 babe-loaderl 版本必须是 7.x，因此在命令行中，咱们明确指定了版本号。若是版本不对应，就会抛出 Cannot find module '@babel/core' 错误。react

2 配置 webpack

在 webpack.config.js 中，新增对 .vue 文件以及 ES6 语法的解析支持：webpack

//插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

//Vue Loader v15+
const VueLoaderPlugin = require('vue-loader/lib/plugin');

var config = {
    module: {
        rules: [
            {//vue 解析
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {//js 解析
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {//css 解析
                test: /\.css$/,
                use: ExtractTextPlugin.extract({//插件
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            }
        ]
    },
    entry: {
        main: './main'
    },
    output: {
        //目标输出目录
        path: '/public/assets',
        //资源文件引用目录
        publicPath: '/dist/',
        //输出文件的文件名
        filename: 'main.js'
    },
    plugins: [//插件
        new ExtractTextPlugin('main.css'),
        new VueLoaderPlugin()
    ]
};
module.exports = config;
复制代码

针对 .vue 文件，使用 vue-loader 来解析。注意：若是 Vue Loader 版本为 15+，那么必须在此配置 VueLoaderPlugin。
由于 vue-loader 在编译 .vue 文件时，会对 <template>、<script> 以及 <style> 标签分别处理，因此咱们在 vue-loader 以后，又配置了 options 属性，用来指定 CSS 解析器。
也能够对 <template>、<script> 以及 <style> 标签分别指定不一样的前端技术，好比 <style lang="less">，而后在配置文件的 loaders 中指定想要的 loader 就能够咯O(∩_∩)O~

3 配置 babel

babel 是新一代 JavaScript 语法的编译器。由于新，因此浏览器会因版本不一样而存在兼容性问题。可是新语法实在太诱人咯，它不但可以减小代码量，从而减轻代码维护成本，并且还拥有 async,await 等新特性。web

Babel 可让咱们放心地使用大部分 JavaScript 新的标准语法，代码会经过编译，生成兼容绝大多数主流浏览器的代码。在项目工程脚手架中，通常会使用 .babelrc 文件，来配置一些基本参数，配合 webpack 进行打包压缩。npm

在项目根目录，建立 .babelrc 文件，内容以下：api

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "transform-runtime"
  ],
  "comments": false
}
复制代码

属性	说明
presets	指定预设转码器；babel6 有这些值可选：es2015 ,stage-0 , stage-1 ,stage-2 , stage-3 ,react。
plugins	插件。这里安装了 transform-runtime 插件。
comments	在生成的文件中，是否带注释。

之因此使用了 transform-runtime 插件，是由于 babel 在转换 ES2015 语法为 ECMAScript 5 的语法时，它须要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每个 js 文件里，这样文当件多的时候，项目就会很大。因此 babel 提供了 transform-runtime 插件来将这些辅助函数 “搬” 到一个单独的模块 babel-runtime 中，经过这种方式就能有效地减小项目文件。浏览器

4 编写 *.vue 文件

每一个 *.vue 文件表明一个组件，组件之间能够相互依赖。

咱们在主工程根目录下，新建一个 hello.vue：

<template>
    <div>您好，{{name}}</div>
</template>

<script>
    export default {
        data() {
            return {
                name: 'Deniro'
            }
        }
    }
</script>
<style scoped>
    div {
        color: #3399ff;
        font-size: 18px;
    }
</style>
复制代码

这里使用了 ES 6 语法：

data () {}
复制代码

就是：

data:function () {
}
复制代码

在 <template> 标签中写 H5 代码，就是畅快O(∩_∩)O~，Webpack 会把它编译为 Render 函数。
由于配置了extract-text-webpack-plugin 插件，因此写在 <style> 中的样式，会被打包到 main.css 中。由于加了 scoped 属性，因此这里定义的样式只对当前组件（hello.vue）有效。

5 引用 *.vue 组件

在父组件中引用 *.vue 组件时，能够自定义组件名称。如今让咱们在 main.js 中引用刚刚定义的 hello.vue 组件：

// 引入 Vue 框架
import Vue from 'vue'

//引入 hello.vue 组件
import Hello from './hello.vue'

new Vue({
    el: '#app',
    render: h => h(Hello)
})

复制代码

这里使用了 ES6 的箭头函数：

render: h => h(Hello)
复制代码

至关于：

render: function (h){
  return h(Hello)
}
复制代码

注意： 箭头函数中的 this 对象指向的是定义时所在的对象。请看下面的例子：

function Timer() {
    this.id = 10;

    var that = this;

    setTimeout(function () {
        console.log('普通 this=' + this.id);//undefined
        console.log('普通 that=' + that.id);//10

    }, 1000)

    setTimeout(() => {
        console.log('箭头函数=' + this.id);//10
    }, 1000)
}

new Timer();
复制代码

运行结果：

使用箭头函数以后，咱们就不须要再额外定义一个 that 来保存父函数的 this 对象咯，代码将所以变得更简洁O(∩_∩)O~

6 运行

在安装了 Webpack 环境下的工程根目录，执行 npm run dev，执行成功后，就会自动打开浏览器：

F12 打开浏览器调试器：

能够看到，<div id="app"> 被替换为

<div data-v-3548c998="">您好，Deniro</div>
复制代码

对应的 CSS 也加上了咱们定义的样式。

之因此加了 -v-xxx，是由于咱们在 <style> 加了 scoped 属性。

7 扩展

咱们再定义两个组件（标题与按钮组件），把它们引入 hello.vue。

title.vue：

<template>
    <h1>
        <a :href="'#'+title">{{title}}</a>
    </h1>
</template>

<script>
    export default {
        props: {
            title: {
                type: String
            }
        }
    }
</script>

<style scoped>
    h1 a {
        color: #3399ff;
        font-size: 16px;
    }
</style>
复制代码

button.vue：

<template>
    <button @click="handleClick" :style="styles">
        <slot></slot>
    </button>
</template>

<script>
    export default {
        props: {
            color: {
                type: String,
                default: '#00cc66'
            }
        },
        computed: {
            styles() {
                return {
                    background: this.color
                }
            }
        },
        methods: {
            handleClick(e) {
                this.$emit('click', e);
            }
        }
    }
</script>

<style scoped>
    button {
        border: 0;
        outline: none;
        color: #fff;
        padding: 4px 8px;
    }

    button:active {
        position: relative;
        top: 1px;
        left: 1px;
    }
</style>
复制代码

在根实例 hello.vue 组件中，引入刚刚定义的两个组件：

<template>
    <div>
        <v-title title="电子烟大限将至？"></v-title>
        <v-button @click="handleClick">请点击</v-button>
    </div>
</template>

<script>
    //导入组件
    import vTitle from './title.vue';
    import vButton from './button.vue';

    export default {
        data() {
          ...
        },
        components: {
            vTitle,
            vButton
        },
        methods: {
            handleClick(e) {
                console.log(e);
            }
        }
    }
</script>
<style scoped>
  ...
</style>
复制代码

这里也用了 ES6 对象字面量缩写语法：

components: {
            vTitle,
            vButton
        }
复制代码

至关于：

components: {
            vTitle: vTitle,
            vButton: vButton
        }
复制代码

当对象的 key 与 value 同名时，就能够采用这种简洁的写法咯O(∩_∩)O~

注意： 这些导入的组件，都是局部注册且能够自定义名称的组件。

渲染结果：

点击按钮组件后的运行结果：

至此，Vue 单文件组件环境搭建成功O(∩_∩)O~