文件结构

根据上一章的内容成功建立vue项目后，你会发现有这样几个文件夹：

node_modules：由node安装的依赖库
src：(主要的工作区域) 项目的源代码文件夹
(可能没有) .vscode：由vscode生成文件夹，存放vscode的配置文件

还有一些文件我们将会在后面用到，到时候再进行更多介绍。

src文件夹

src是存放源代码的文件夹，里面默认包含这些文件：

assets文件夹：资源，比如图片文字之类的静态资源
components文件夹：vue组件，默认生成自带了几个HelloWorld.vue之类的文件
App.vue：可以简单理解为，最底层的前端页面描述文件
main.js：可以简单理解为整个vue项目的main.java，主入口程序

关键的内容

由浅入深，我们首先关注 main.js 和 App.vue

App.vue

打开 App.vue 你可以找到一坨代码：

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

可以理解为，这就是你的index.html，你在里面写点什么，vue项目跑出来以后就长啥样。

main.js

打开 main.js 你将会发现这样的内容，意思是：导入createApp方法，并新建一个叫app的vue对象，并挂载到一个index.html中，id为app的元素上 (这里可以暂时不理解，深入学习JS后就很明了了)

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

import './assets/main.css'

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

components

在上面的 App.vue 代码中，你发现除了 div 标签还有 HelloWorld，这个标签就是我们的自定义组件components文件夹中的 HelloWorld.vue。
为什么要这样做呢？我们把 按钮，表格 封装成 myButton.vue，然后就可以在任何你想要使用的时候直接引用，修改时直接修改其源，才能方便维护和开发。

.vue文件

打开任何一个 .vue 文件，你都会发现里面有 <template>，<script>，<style>，这对应了html+css+js，每个文件中划分清楚，且各个 .vue 文件都完成了基本的功能和样式封装，我们的开发工作也将主要围绕着这些进行，例如一个简单的 二次封装 按钮：

<template>
  <div class="main">
    <button class="button">{
   
   { buttonContext }}</button>
  </div>
</template>

<script setup>
import {
      
       ref } from "vue";

const buttonContext = ref(0);
</script>

<style>
.main {
      
      
  min-width: 20px;
}
.button {
      
      
  min-width: 20px;
}
</style>

如何制作这样一个按钮？请看下一章节内容。

认识新建Vue项目中的文件结构和作用 (vue学习 - Ch1.2 认识vue文件)

文章目录