Vue单文件组件

传统Vue组件的缺陷：#

全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中)没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）

解决方案：使用Vue单文件组件，每个单文件组件的后缀名都是.vue每一个Vue单文件组件都由三部分组成

　　1).template组件组成的模板区域

　　2).script组成的业务逻辑区域

　　3).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",
                
            }
        ]
    }
}

在webpack中使用vue:#

想要让vue单文件组件能够使用，我们必须要安装vue并使用vue来引用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目录