Vue框架中的单文件组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/sky6even/article/details/104064184

本文探讨了Vue框架的传统组件缺陷，如全局组件命名冲突、模板缺少语法高亮等。然后介绍了单文件组件（.vue）的优势，包括模板、业务逻辑和样式的统一管理，并提到了Vetur插件对.vue文件的支持。接着讲解了如何配置Vue组件加载器和引用单文件组件的方法，最后讨论了使用Webpack打包发布项目的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

◆ 传统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目录