vue官方提供了两种快速创建工程化的SPA项目的方式:
基于vite创建SPA项目
基于vue-cli创建SPA项目

用vue-cli创建SPA项目文章链接

创建vite的项目

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

npm init vite-app 项目名称cd 项目名称
npm install
npm run dev

复制local里的地址，到浏览器里：

这样就是创建好了！！

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

vite项目的运行流程

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

App.vue

index.html 预留el区域：

main.js中进行渲染：

// 1. 按需导入 createApp 函数
import { createApp } from 'vue'
// 2. 导入待渲染的 App.vue 组件
import App from './App.vue'// 3. 调用 createApp 函数，创建 SPA 应用的实例
const app = createApp(App)// 4. 调用 mount() 把 App 组件的模板结构，渲染到指定的 el 区域中
app.mount('#app')