Java登陆第三十五天——Vite+Vue3目录结构、.vue文件理解（SFC）
1.Java登陆第一天——Mysql安装2.Java登陆第一天——Maven入门3.Java登陆第二天——SQL之DDL4.Java登陆第二天——SQL之DML5.Java登陆第三天——SQL之DQL(一)基础查询、聚合函数、分组查询6.Java登陆第四天——SQL之DQL(二)分页查询、多表查询、自连接7.Java登陆第五天——SQL之DQL(三)子查询8.Java登陆第六天——SQL之表复制，表去重，合并查询9.Java登陆第六天——SQL之SQL(四)外连接10.Java登陆第六天——SQL之约束11.Java登陆第七天——SQL之事务12.Java登陆第七天——SQL之事务隔离13.Java登陆第八天——SQL之DCL14.Java登陆第九天——JDBC(一)DriverManager、Connection、Statement15.Java登陆第十天——JDBC(二)ResultSet16.Java登陆第十一天——JDBC(三)PreparedStatement、CLOB、BLOB17.Java登陆第十二天——网络编程(一)网络的概念18.Java登陆第十二天——网络编程(二)InetAddress、Socket19.Java登陆第十三天——网络编程(三)DatagramSocket20.Java登陆第十四天——网络编程(四)韩顺平网络编程21.Java登陆第十五天——网络编程(四)韩顺平网络编程22.Java登陆第十六天——网络编程(四)韩顺平网络编程23.Java登陆第十七天——网络编程(四)韩顺平网络编程完成24.Java登陆第十七天——正则表达式25.Java登陆第十八天——Java8之Lambda表达式26.Java登陆第十九天——HTML规范与语法27.Java登陆第二十天——HTML常用标签28.Java登陆第二十一天——CSS29.Java登陆第二十二天——JavaScript入门30.Java登陆第二十三天——JavaScript对象、JSON、事件31.Java登陆第二十四天——JavaScriptBOM、DOM32.Java登陆第二十五天——Tomcat、认识JavaWeb项目33.Java登陆第二十六天——Http34.Java登陆第二十六天——Servlet35.Java登陆第二十七天——多种方法Servlet映射、Content-Type36.Java登陆第二十八天——Servlet生命周期37.Java登陆第二十九天——Servlet继承关系，service和doGet的区别38.Java登陆第二十九天——ServletConfig和ServletContext39.Java登陆第二十九天——HttpServletRequest和HttpServletResponse40.Java登陆第二十九天——请求转发和响应重定向41.Java登陆第三十天——Cookie和Session42.Java登陆第三十天——域对象43.Java登陆第三十一天——Filter44.Java登陆第三十一天——监听器45.Java登陆第三十二天——AJAX和异步46.Java登陆第三十二天——前端工程化47.Java登陆第三十二天——ES6(一)let、const、模板字符串、解构表达式、箭头函数48.Java登陆第三十三天——ES6(二)reset、spread、Class类语法糖49.Java登陆第三十三天——ES6(二)浅拷贝、深拷贝50.Java登陆第三十三天——ES6(二)模块、模块化51.Java登陆第三十四天——Node.js安装、npm配置、npm命令52.Java登陆第三十四天——使用Vite创建工程化的Vue3项目
53.Java登陆第三十五天——Vite+Vue3目录结构、.vue文件理解（SFC）
54.Java登陆第三十五天——VUE初始页面解析55.Java登陆第三十六天——VUE3引入CSS56.Java登陆第三十六天——VUE3响应式入门、setup语法糖57.Java登陆第三十七天——VUE3插值表达式、文本渲染、属性渲染、事件绑定58.Java登陆第三十七天——VUE3响应式基础、条件渲染、列表渲染59.Java登陆第三十八天——VUE3双向绑定，监听器(侦听器)60.Java登陆第三十八天——VUE3生命周期、钩子函数、组件拼接、组件传参(组件通信)61.Java登陆第三十九天——Router路由入门62.Java登陆第三十九天——Router编程式路由，路由传参63.Java登陆第四十天——Router路由守卫64.Java登陆第四十天——Router路由守卫练习65.Java登陆第四十一天——Promise、async关键字、await关键字66.Java登陆第四十一天——Axios67.Java登陆第四十二天——Axios拦截器68.Java登陆第四十二天——跨域69.Java登陆第四十三天——Pinia70.Java登陆第四十四天——跟写微头条遇到的问题项目结构
使用Vite创建Vue3+JS默认项目结构如下：(vmoudle1是项目名)
Vue中提出了组件的概念。
组件是代码复用的一种方式，用于抽象出一个可复用的UI，方便在不同的场景中进行重复使用。
组件根据大小可被分为：(从小到大)
1.组件
2.布局组件
3.页面级别组件
-
.vscode
- 忽略
-
node_modules
- 存储项目依赖
-
public
- 存储公共资源，如 HTML 文件、图像、字体等.
-
src （存储项目的源代码，以下是src内部划分建议）：
-
assets：存储项目中用到的静态资源。
-
components：存储组件相关的文件。
-
layouts ：存储布局组件的文件。
-
pages ：存储页面级别的组件。
-
plugins ：存储 Vite 插件相关的文件。
-
router ：存储 Vue.js 的路由配置文件。
-
store ：存储 Vuex 状态管理相关的文件。
-
utils ：存储一些通用的函数。
-
-
main.js
- Vue默认入口
-
.gitignore
- git配置文件
-
package.json
- Node.js配置文件。
-
README.md
- 项目文档。
-
vite.config.js
- Vite的配置文件。
知道即可，后续的学习中涉及到就理解了。
.vue文件
如下是一个传统页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./Test.css" rel="stylesheet" type="text/css">
<script src="./Test.js"></script>
</head>
<body>
Hello,world!
</body>
</html>
其由三部分组成，第一是HTML，第二是外部的CSS，第三是外部的JS。
类似的，在VUE中被称为多文件组件。
把上述多文件组件改成单文件组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*假装有CSS代码*/
</style>
<script>
//假装有JS代码
</script>
</head>
<body>
Hello,world!
</body>
</html>
这不就是把外部的文件全部写在内部了吗？
是的，VUE对HTML/CSS/JS进行了统一封装。并提供了新的文件格式.vue
.vue由三个部分组成：
-
<template>
-
<style>
-
<script>
| .vue中部分 | 传统部分 | 描述 |
|---|---|---|
| <template> | HTML | 代替传统的.html文件 |
| <style> | CSS | 代替传统的.js文件 |
| <script> | JS | 代替传统的.css文件 |
这就是SFC（Single-File Component，简称 SFC,单文件组件）。
在VUE中，就是编写一个个的组件，再将各个组件拼凑成完整的页面。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）