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目录