使用vite创建单页应用

使用vite创建单页应用

学习路径

vite介绍
创建 vite 的项目
梳理项目的结构
vite 项目的运行流程

vite介绍

·vite·是vue 官方提供另外一种快速创建工程化的 SPA 项目的方式(一共有两种方式)
① 基于 vite 创建 SPA 项目
② 基于 vue-cli 创建 SPA 项目

创建 vite 的项目

按照顺序执行如下的命令，即可基于 vite 创建 vue 3.x 的工程化项目

1. npm init vite-app 项目名称
2. cd 项目名称
3. npm install
4. npm run dev

整个新建项目当中：

1. node_modules 目录用来存放第三方依赖包
2. public 是公共的静态资源目录
3. src是项目的源代码目录（程序员写的所有代码都要放在此目录下）
4. .gitignore 是 Git 的忽略文件
5. index.html是 SPA 单页面应用程序中唯一的 HTML 页面
6. package.json 是项目的包管理配置文件

src 项目源代码目录之下:

1. assets目录用来存放项目中所有的静态资源文件（css、fonts等）
2. components目录用来存放项目中所有的自定义组件
3. App.vue 是项目的根组件
4. index.css 是项目的全局样式表文件
5. main.js 是整个项目的打包入口文件

vite 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过main.js把 App.vue 渲染到 index.html的指定区域中。
其中：
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中