✨✨ 欢迎大家来到景天科技苑✨✨
🎈🎈 养成好习惯，先赞后看哦~🎈🎈
🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，Golang开发，云原生开发，前后端框架，PyQt5和Tkinter桌面开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，云原生K8S集群搭建与管理，linux，shell脚本等实操经验，网站搭建，数据库等分享。
所属的专栏： 前端零基础，实战进阶教学
景天的主页： 景天科技苑
文章目录
- vue3+vite
-
- [1. 什么是Vite?](#1. 什么是Vite?)
- [2. 通过vite创建工程项目](#2. 通过vite创建工程项目)
- [3. 目录结构介绍](#3. 目录结构介绍)
- [4. Vue setup ref和reactive的区别](#4. Vue setup ref和reactive的区别)
vue3+vite
1. 什么是Vite?
Vite是一个现代化的前端构建工具，以其快速的开发服务器和热模块替换（HMR）功能著称。它利用浏览器的原生ES模块加载能力，显著提升了开发速度和构建效率。本文将结合实际案例，详细讲解Vite的安装、配置、使用及优化。
vite也是尤雨溪开发的，支持vue，react等前端框架。
vite相比vue-cli，性能更好，速度更快。
vue3官方文档
https://cn.vuejs.org/guide/introduction.html
在工具链指南里面，我们可以找到脚手架工具vite的使用方法
2. 通过vite创建工程项目
我们点进去vite官方文档
点开始
我们在vscode命令行，执行创建工程命令
如果国内下载包比较慢，可以使用cnpm来代替npm
首先将npm源改为最新的淘宝源
npm config set registry https://registry.npmmirror.com
然后创建项目
bash
npm create vue@latest需要下载create-vue
输入工程名称
一路选择，我们就初始化好了一个项目
然后按照指引，下载依赖
bash
cd vite-study
npm install 
运行项目
我们浏览器访问下给出的url
vite工程创建好之后，创建好了很多的文件夹和文件，分别有什么作用呢？我们来详细讲解下。
3. 目录结构介绍
- node_modules: 存放项目依赖的其他模块
- public: 用于存放静态文件，可以使用/xxxx进行访问，一般会把第三方的文件放在这个目录，不会变更的文件放在这里。
- src: 项目源代码目录
3.1 assets: 也是用来存放静态文件，比如说字体、图片、icon等 和public的区别，一般自己的静态文件会放在assets目录，第三方文件会放在public目录
3.2 components: 用于存放组件，一个个vue文件
3.3 App.vue: 项目的根组件，index.html通过导入main.js实现App.vue和index.html的内容绑定。同时其他组件也通过app.vue进行导入
3.4 main.js: 程序的入口文件，可以实现app.vue和index.html绑定
3.5 style.css: 全局样式表，也是通过main.js导入的 - index.html: 网站的入口
- package.json: 项目的描述文件，依赖的包、版本 执行npm install 的时候，就是根据这个文件来下载一些依赖包到node_modules文件夹中
- 没有被列出来的一些目录:
src/
router: vue路由配置目录
store: 状态存储
views: 页面组件
utils: 封装的工具类
config: 程序配置
api: 后端接口配置，一般我们不直接调用后端接口，而是在原有的后端接口的基础上再封装一层，就在这里配置。这样，当后端接口产生了变化，我们不需要修改我们的代码，只需要修改这里的配置即可
4. Vue setup ref和reactive的区别
在vue3中，如果想要定义一个响应式数据，必须要用ref来定义
和ref类似的还有一个reactive，它们俩有啥区别呢？
如果用ref，reactive的话，需要从vue中将ref导入进来的。
ref：一般用于定义简单的响应式数据，比如常见的基本数据类型 字符串 数值型 布尔值等等。
reactive：用于定义一些复杂的数据类型，比如数组，对象等。
//最大的区别还在于，ref会将普通的数据类型转化为响应式的对象
const name = ref("jingtian")
console.log(name);
//如果想要再修改name的值的话，是不能直接赋值字符串的。那该怎么修改呢？
//如果要修改，需要修改name这个对象的value属性值
name.value ="景天"
console.log(name);
通过ref定义的变量，在template中应用时，不需要加.value 直接使用功能变量名即可，只是在js代码中做操作时，才需要加.value
reactive是直接定义一个响应式对象
//reactive定义一个对象
const info = reactive({
name: "jigntian",
age: 18,
address: "深圳"
})
通过reactive创建的对象，修改方法就是普通的js修改对象的方法
注意，vue3中，现在大多在script标签中使用setup语法糖，不用return返回字段就可以使用了
如果不使用语法糖的情况下，还是需要return返回字段的
使用语法糖，定义的变量可以直接使用
