Vue 脚手架中几个重要的文件

src 文件夹

main.js

main.js 该文件是整个项目的 入口文件

此处引入 Vue,引入 App 组件,关闭 vue 的生成提示,创建 Vue 实例对象


App.vue

App 组件是所有组件的父组件:导入所有组件注册、使用

<template>
    <!-- 使用静态资源 -->
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 使用组件 -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
    // 导入组件
    import HelloWorld from './components/HelloWorld.vue'

    export default {
        name: 'App',
        components: {
            // 注册组件
            HelloWorld
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

components 文件夹

存放所有组件


assets 文件夹

存放静态资源:图片、视频、音频



public

favicon.ico

网站的页签图标


index.html

创建 app 容器



posted @   春暖花开鸟  阅读(47)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示