Vue3 学习笔记02-Vue3 目录结构

在 IDE（Vscode、Atom等）中打开该目录，结构如下所示：

根据自己创建的项目路径打开,项目结构如下图所示。

Vue3 学习笔记02-Vue3 目录结构

node_modules：npm 加载的项目依赖模块

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。
index.css: 样式文件。

public：公共资源目录。

package.json：项目配置文件。

接下来我们可以尝试修改下初始化的项目，将 src/APP.vue 修改为以下代码：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello lucky" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'

export default{
  name:'APP',
  components:{
    HelloWorld
  }
}

</script>

打开页面 http://localhost:3000/，一般修改后会自动刷新，显示效果如下所示:

Vue3 学习笔记02-Vue3 目录结构