Vue框架之單文件組件

◆ 傳統Vue組件的缺陷：

• 全局定義的組件不能重名，字符串模板缺乏語法高亮，不支持css(當html和js組件化時，css沒有參與其中)
• 沒有構建步驟限制，只能使用H5和ES5，不能使用預處理器（babel）

◆ 單文件組件：

使用Vue單文件組件，每個單文件組件的後綴名都是.vue。每一個Vue單文件組件都由三部分組成

• template組件組成的模板區域
• script組成的業務邏輯區域
• style樣式區域

<template>

    組件代碼區域

</template>

<script>

    js代碼區域

</script>

<style scoped>

    樣式代碼區域

</style>

注：安裝Vetur插件可以使得.vue文件中的代碼高亮

◆ 配置.vue文件的加載器：

安裝vue組件的加載器

 npm install vue-loader vue-template-compiler -D

配置規則：更改webpack.config.js的module中的rules數組

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
    ......
    plugins:[ htmlPlugin, vuePlugin  ],
    module : {
        rules:[
            ...//其他規則
            { 
                test:/\.vue$/,
                loader:"vue-loader",
            }
        ]
    }
}

◆ 引用vue單文件組件：

安裝Vue

npm install vue -S

在index.js中引入vue

import Vue from "vue"

創建Vue實例對象並指定el，最後使用render函數渲染單文件組件

const vm = new Vue({
    el:"#first",
    render:h=>h(app)
})

◆ 使用webpack打包發佈項目：

在項目上線之前，我們需要將整個項目打包併發布。

配置package.json

"scripts":{
    "dev":"webpack-dev-server",
    "build":"webpack -p"
}

在項目打包之前，可以將dist目錄刪除，生成全新的dist目錄