vue3进阶-----单文件组件

最新推荐文章于 2025-06-22 21:40:38 发布

前端贾公子

最新推荐文章于 2025-06-22 21:40:38 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3实战文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_63358859/article/details/131410061

文章介绍了Vue3中的单文件组件概念和优势，包括组件定义和SFC的使用，还详细讲解了如何使用Vue-CLI创建项目，探讨了Vue-CLI的选项和配置。此外，提到了Vite作为官方推荐的快速开发工具，并讨论了解决跨域问题的代理配置。

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

三.vue3进阶

1.单文件组件

1-1组件定义-重塑经脉，断了？

组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：


<body>
    <div id="box">
        <kerwin-navbar></kerwin-navbar>
        <kerwin-sidebar></kerwin-sidebar>
        <kerwin-global-button></kerwin-global-button>

    </div>
    <script>
        //扩展html元素， 封装可重用的代码
        var obj = {
            data() {
                return {
                }
            },

        }
        var app = Vue.createApp(obj)
        //定义全局组件
        app.component("kerwin-navbar", {
            //模板
            template: `
                <nav style="background:yellow;">
                    <ul>
                       <li v-for="item in datalist">
                        {
  
  {item}}
                       </li>    
                    </ul>
                    <kerwin-global-button></kerwin-global-button>
                    
                </nav>
            `,
            data() {
                return {
                    datalist: ["首页", "新闻", "产品"]
                }
            }
        })

        app.component("kerwin-global-button", {
            template: `<div >
                        <button style="background:blue;">全局</button>    
            </div>`
        })

        app.component("kerwin-sidebar", {
            template: `
                <aside>
                    我是侧边栏
                    <kerwin-global-button></kerwin-global-button>
                    <kerwin-button></kerwin-button>   
                </aside>
            `,
            //局部组件定义
            components: {
                "kerwin-button": {
                    template: `<div >
                        <button style="background:red;">联系</button>    
                    </div>`,
                    // watch ,computed,methods
                }
            }
        })
        app.mount("#box")
    </script>
</body>

组件带来的好处（1）结构清晰（2）复用性增加（3）封装性

当前写法的吐槽：（1）dom高亮和代码提示没有（2）css只能行内

1-2单文件组件(SFC)-独立日

Vue的单文件组件(即*.vue文件，英文Single-FileComponent，简称SFC)是一种特殊的文件格式，使我们能够将一个Vue组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例：

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {
  
  { count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

如你所见，Vue的单文件组件是网页开发中HTML、CSS和JavaScript三种语言经典组合的自然延伸。