Vue项目文件结构及引用（2024.5.27更新）

目录

        1、网络端口用处

        2、项目中如何书写代码

        3、Vue引用组件语法

        4、更新中（随着笔者学习进度同步更新）

---

1、网络端口的用处

        我们用命令行启动vue服务后，将地址复制进入网址打开就能得到一个初始界面（如果不会可以翻到上一篇发的关于网络端口无法正常打开的处理方式）。

        如图，这个界面实际上就是你的vue项目成果的一个单页面，后续你对vue项目文件中的修改实际上都可以在这里进行实时反馈（需要刷新，页面可以挂在后台，不用每次都重新进入网络端口，在实际应用中你可以看成这就是你的服务器端）。

---

2、项目中如何书写代码（使用vscode的话建议下载vue-official拓展）

        用你的编译器打开你的项目文件夹（我这里以vs.code为例），打开你的src文件夹，你的后续源码都是在这个文件下书写。

        将其整理删除到只剩下以下两个盒子，然后可以将component中的所有文件都先删除，因为其中的组件都是初始界面的组件，以及assets（初始样式），可以清理干净然后再进行书写。

<template>
</template>
<script setup>

</script>

        当你重新刷新你的服务器端口，是一片空白且控制台没有报错说明这个项目已经比较干净了，你可以进行往后的代码书写了

---

3、vue引用组件语法

        在你将原始样式都清理之后，准备书写一个小项目，你可以在component文件夹下创建以(.vue)为后缀的vue文件，作为你的第一个组件，再将其引入至app.vue中，引入语法如下：

        例如我在components中创建了一个demo组件，我要将其引入至app.vue中可以书写以下代码

<template>
  <demo/>
</template>
<script setup>
 import demo from "./components/demo.vue"

</script>

（1）template中的表示的是你的引入的组件在这个位置，需要以（/）结尾做标签

（2）script中的引入意思是从该路径的这个文件引入进来命名为demo，然后在template中被引入（由于笔者习惯，所以将script标签放在下面，实际上放在上面会更好理解这段代码的意思）

---

4、更新中。。。