Vue3.0极速入门- 目录和文件说明

目录结构

以下文件均为npm create helloworld自动生成的文件目录结构

目录截图

目录说明

目录/文件	说明
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里
assets	放置一些图片，如logo等。
components	vue组件文件的存放目录,也是主要的工作目录
App.vue	项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js	项目的核心文件。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

文件说明

index.html:启动页面

为后续的vue文件提供可替换的壳标签

main.js:入口文件，类似于java的main方法

功能有两个：

1、导入vue框架；
2、将App.vue的内容挂载(替换)到index.html的

标签

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue：第一个vue文件

HelloWorld.vue: 展示页面

msg是定义好的参数，外部组件(App.vue)可以通过参数传递的方式，将数据传给HelloWorld.vue