文件结构
根据上一章的内容成功建立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>
如何制作这样一个按钮?请看下一章节内容。