vite是vue 官方提供另外一种快速创建工程化的 SPA 项目的方式(一共有两种方式)
- 基于 vite 创建 SPA 项目
-
基于 vue-cli 创建 SPA 项目
创建 vite 的项目
-
`npm init vite-app 项目名称
-
cd 项目名称 -进入到项目
-
npm install -下载包
4.npm run dev -启动项目
项目的结构
使用 vite 创建的项目结构如下
- .gitignore 是 Git 的忽略文件
- package.json 是项目的包管理配置文件
- node_modules 目录用来存放第三方依赖包
在 src 这个项目源代码目录之下，包含了如下的文件和文件夹
其中：
- assets 目录用来存放项目中所有的静态资源文件（css、fonts等）
- components 目录用来存放项目中所有的自定义组件
- App.vue 是项目的根组件
- index.css 是项目的全局样式表文件
- main.js 是整个项目的打包入口文件
vite 项目的运行流程
在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
- App.vue 用来编写待渲染的模板结构
- index.html 中需要预留一个 el 区域
- main.js 把 App.vue 渲染到了 index.html 所预留的区域中
