1. 在webpack中使用vue

1.1 webpack中使用vue說明

1. 在index.html中定義掛在點(diǎn)
2. 在入口js文件中引入vue,并實(shí)例化
3. 注意在webpack中配置別名,默認(rèn)使用的是runtime-only,
4. 因?yàn)樯婕暗侥０寰幾g需要使用到runtime-compiler

1.2 index.html模板中

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

1.3 主入口main.js文件

// 引入vue
import Vue from 'vue'

// 實(shí)例化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中開發(fā)代碼,還需要隨時(shí)去html文件中改模板就不太適合,
2. 此時(shí)可以通過template 選項(xiàng)在vue實(shí)例中處理模板的標(biāo)簽

1.5 將模板代碼提取到j(luò)s中

import Vue from 'vue'

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

2. 將模板抽離為組件

2.1 抽離組件說明

1. 在vue實(shí)例化選項(xiàng)template中開發(fā)大量的代碼不是特別好,

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
    }
})

以后組件中可能會(huì)開發(fā)大量的代碼,

因此我們可以將組件抽離為單獨(dú)的js文件

2.3 組件抽離為單獨(dú)的js文件

組件App.js文件

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

主入口main.js文件

import Vue from 'vue'

// 導(dǎo)入組件的js文件
import App from './App.js'

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

2.4 .vue單文件組件

說明

1. 組件的模板和js代碼的耦合性太高,開發(fā)不方便
2. 未來還有樣式文件,
3. 因此我們可以將模板抽離出來,因此可以定義.vue為后綴的文件
4. .vue后綴的文件也被稱為單文件組件, 一個(gè)文件就是一個(gè)組件
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"
        }
    }
}

這樣 在導(dǎo)入.vue文件時(shí)就可以省略后綴名了