第九节:Webpack配置Vue

1. 在webpack中使用vue

1.1 webpack中使用vue说明

1. 在index.html中定义挂在点
2. 在入口js文件中引入vue,并实例化
3. 注意在webpack中配置别名,默认使用的是runtime-only,
4. 因为涉及到模板编译需要使用到runtime-compiler

1.2 index.html模板中

 <div id="app">
    {{ msg }}
  </div>

1.3 主入口main.js文件

// 引入vue
import Vue from 'vue'

// 实例化vue
let vm = new Vue({
    el:"#app",
    data:{
        msg:"Hello World"
    }
})

1.4 webpack.config.js中配置别名

 resolve: {
    // alias :配置别名
    alias: {
      "vue":"vue/dist/vue.esm.js"
    }
  }

问题:

1. 在入口js中开发代码,还需要随时去html文件中改模板就不太适合,
2. 此时可以通过template 选项在vue实例中处理模板的标签

1.5 将模板代码提取到js中

import Vue from 'vue'

let vm = new Vue({
    el:"#app",
    template:`
        <div>  {{ msg }} </div>
    `,
    data:{
        msg:"Hello World"
    }
})

2. 将模板抽离为组件

2.1 抽离组件说明

1. 在vue实例化选项template中开发大量的代码不是特别好,

2. 因此我们可以将template中的代码抽离为组件,用组件替代模板

2.2 抽离为组件

import Vue from 'vue'

// 抽离为组件
let App = {
    template:`
        <div>  {{ msg }} </div>
    `,
    data(){
        return {
            msg:"Hello World"
        }
    }
}

let vm = new Vue({
    el:"#app",
    template: "<App/>",
    components: {
        App
    }
})

以后组件中可能会开发大量的代码,

因此我们可以将组件抽离为单独的js文件

2.3 组件抽离为单独的js文件

组件App.js文件

export default {
    template:`
        <div>  {{ msg }} </div>
    `,
    data(){
        return {
            msg:"Hello World"
        }
    }
}

主入口main.js文件

import Vue from 'vue'

// 导入组件的js文件
import App from './App.js'

let vm = new Vue({
    el:"#app",
    template: "<App/>",
    components: {
        App
    }
})

2.4 .vue单文件组件

说明

1. 组件的模板和js代码的耦合性太高,开发不方便
2. 未来还有样式文件,
3. 因此我们可以将模板抽离出来,因此可以定义.vue为后缀的文件
4. .vue后缀的文件也被称为单文件组件, 一个文件就是一个组件
5. 只不过是将模板(html), JS, 样式(style)分开
6. 使用vue-loader来处理.vue的文件, 注意vue-loader伴生插件使用
7. 使用vue-template-compiler来编译template模板

配置.vue文件

<template>
    <div class="">  
        {{ msg }} 
    </div>
</template>

<script>
    export default {
        name:"",
        data(){
            return {
                msg:"Hello World"
            }
        }
    }
</script>

<style>

</style>

在webpack.config.js中配置解析.vue的loader

const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const {resolve} = require("path");

module.exports = {
    // ....
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        }),
        new VueLoaderPlugin()
    ],
    // ....
}

3. 在webpack配置省略后缀名

webpack.config.js

module.exports = {
    // ...
    resolve: {
        // 配置省略后缀名
        extensions: [".js",".json",".vue"],
        // alias :配置别名
        alias: {
            "vue":"vue/dist/vue.esm.js"
        }
    }
}

这样 在导入.vue文件时就可以省略后缀名了