【Vue3速成】02-vue工程化目录结构+执行原理

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
🎯 你正在阅读「半路出家玩前端」系列文章 🎯

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

🔥 弹简特 个人主页

❄️ 个人专栏直通车：

• 💻 软件测试入门记
• 📱 野生测试修炼手册 | APP 专项测试笔记
• 🔌 接口测试从入门到跑路
• ☕ 一个后端的 JavaEE 续命指南
• 🛜 网络原理续命手册
• 🐍 Python 从零摸索日记

✨ 靠热爱去书写自己，靠勇敢去书写生活！

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

---

🌟 博主简介:

---

文章目录：

• 一、前端工程的目录结构
• 二、前端工程的运行原理
• • 1、访问的永远都是index.html
  • 2、引入main.js
  • 3、main.js
  • 4、App.vue
  • • [4.1 vue组件之间的使用](#4.1 vue组件之间的使用)
    • [4.1 vue中的template注意事项](#4.1 vue中的template注意事项)
  • 5、一图解释原理
• 三、运行脚本
• • 1、dev
  • 2、build
  • 3、preview
• 四、Vite+Vue3关于样式的导入方式
• • 1、全局引入main.js
  • 2、vue文件script代码引入
  • 3、Vue文件style代码引入

---

一、前端工程的目录结构

需要注意的是：我们前端文件位置不是全是固定的，他使用的是路径引用，你想要放在哪就放在哪，前提是你得告诉他这个文件的路径在哪里。

项目名/
├── .vscode/           # VS Code 编辑器配置：例如在extensions.json文件中描述需要安装的插件。
├── dist/              # 生产环境构建输出目录
├── node_modules/      # 项目依赖的 npm 包
├── public/            # 静态资源，里面有一个文件vite.svg，作为网页的页签图标。该目录下的文件不会被 Vite 构建处理，文件会直接被复制到最终产物的根路径（dist 目录下）。
└── src/               # 源代码目录：前端工程师的工作结果
    ├── App.vue        # Vue 根组件
    ├── assets/        # 图片、字体等静态资源（和public的区别是：assets中的资源会被webpack解析打包（如合并、压缩），而public中的资源会被直接复制到输出目录。）
    ├── components/    # 可复用的 Vue 组件
    ├── main.ts        # 应用入口文件（初始化 Vue 实例）
    ├── style.css      # 全局样式文件
    └── vite-env.d.ts  # Vite 环境变量类型声明，例如该文件中的默认配置作用是：你创建了.jpg .txt等文件ts是不认识的，它的作用就是让ts去认识这些文件。
├── .gitignore         # 指定 Git 忽略的文件和目录
├── index.html         # 主 HTML 文件（应用入口）：在这个文件中引入了main.ts。
├── package.json       # 项目配置和依赖管理（类似于maven中的pom.xml文件）
├── package-lock.json  # 锁定依赖版本，确保安装一致性
├── README.md          # 项目说明文档
├── tsconfig.node.json # 专为项目中的 Node.js 相关脚本（如构建工具、配置文件）提供的 TypeScript 编译配置
├── vite.config.ts     # Vite 构建工具配置（整个工程的配置文件：安装插件，配置代理等。）

---

二、前端工程的运行原理

1、访问的永远都是index.html

我们浏览器输入http://localhost:5173/你访问的永远都只是index.html页面，你们你会问，其他页面呢？不要管其他页面，你只要清楚，你访问的永远都是index.html即可

2、引入main.js

请看：

然后main.js中有什么呢？

3、main.js

main.js到底做了什么

4、App.vue

什么是.vue文件?

• 传统的页面有html文件css文件和js文件三个文件组成(多文件组件)；
• vue将这文件合并成一个vue文件(Single-File Component，简称 SFC，单文件组件)；
• vue文件对js/css/html统一封装，这是VUE中的概念，该文件由三个部分组成 <script> <template> <style>；
  • template标签 代表组件的html部分代码，代替传统的html文件；
  • script标签 代表组件的js代码，代替传统的js文件；
  • style标签 代表组件的css样式代码，代替传统的css文件；

---

4.1 vue组件之间的使用

4.1 vue中的template注意事项

template建议只有一个子标签

5、一图解释原理

---

三、运行脚本

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

1、dev

我们使用npm run dev是运行开发环境下的项目，他会实时更新，如下：

2、build

使用npm run build可以构建项目

这个build是构建项目，为什么需要构建，构建可以理解为是打包，你注意了，我们的浏览器能够识别什么？

浏览器肯定只能识别HTML、CSS、JS呀，但是我们的项目中有VUE文件呀，如下：

所以我们的构建的作用其实很简单：就是将你的项目给我打包成浏览器能够看得懂的HTML、JS、CSS文件，如下所示，打包完成之后我们会生成一个dist目录：

原理：

3、preview

使用npm run preview可以预览你构建好之后的项目，如下：

注意，如果项目没有被构建，那么就会报错的，比如我们将构建好之后的dist目录删除，那么就会报错了：

---

四、Vite+Vue3关于样式的导入方式

1、全局引入main.js

import './style/reset.css' //书写引入的资源的相对路径即可！

2、vue文件script代码引入

import './style/reset.css'

3、Vue文件style代码引入

@import './style/reset.css'

---