使用vite创建单页应用

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

1. 基于 vite 创建 SPA 项目

2. 基于 vue-cli 创建 SPA 项目

   
   

创建 vite 的项目

1. `npm init vite-app 项目名称

   
   

2. cd 项目名称 -进入到项目

   
   

3. npm install -下载包

   
   
   
   

   4.npm run dev -启动项目

   
   

项目的结构

使用 vite 创建的项目结构如下

1. .gitignore 是 Git 的忽略文件
2. package.json 是项目的包管理配置文件
3. node_modules 目录用来存放第三方依赖包

在 src 这个项目源代码目录之下，包含了如下的文件和文件夹

其中：

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

vite 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：

1. App.vue 用来编写待渲染的模板结构
2. index.html 中需要预留一个 el 区域
3. main.js 把 App.vue 渲染到了 index.html 所预留的区域中