vite 创建 vue3 项目历史发展vite 和 vue3 一起发布一开始 vite 有一个 1.0 版本以 vue3 为主半年不到更新到 2.0 跨框架如何创建一个 vue3 的项目我们以 vite2.5.2 为例子npm init vitejs/app ( 注意这里使用 npm init 可以但如果使用 pnpm init 不行要改成 pnpm create vitejs/app)vite-vue3 项目名称vue 选择项目框架这里默认且仅支持 vue3javascript 选择 js 版本框架use rolldown-vite (试验版本 vite我们选 no)yes 使用 npm 进行下载我们通过上面步骤创建的项目 vite 版本是 “vite”: “^7.2.4” 我们把它适配到课程讲解的版本 2.5.2 版本devDependencies:{vitejs/plugin-vue:^1.10.2,vite:^2.5.2}将上面这段代码贴到 package.json 对应的属性的位置运行 1.pnpm install 2.pnpm dev 3.生成本地服务地址http://localhost:5173/查看控制台我们发现我们下载的版本 vite 是 2.9.18 , vitejs/plugin-vue 是 1.102, 我们把整体的 package.json 文件贴一下{name:vite-vue3,private:true,version:0.0.0,type:module,scripts:{dev:vite,build:vite build,preview:vite preview},dependencies:{vue:^3.5.24},devDependencies:{vitejs/plugin-vue:^1.10.2,vite:^2.5.2}}观察项目文件没有提供 eslintprettier 功能需要自己增加vite 默认支持这些内容eslint 不支持保存文件自动做文件校验但我们可以手动执行 eslint 命令可以实现Webpack vue-cli 通过下载配置 eslint-loader 来实现 eslint 检测功能目录结构public 存放静态文件图片一些不需要编译的内容vite 提供路径映射让我们方便的 importsrcassets 存放图片 通过 import 方式引入可以编译成路径可以做一些处理main.js 入口文件App.vue 与 传统项目创建的 App.vue 差不多index.htmlWebpackrollup 以 js 为 entry编译入口一般来说是一个 js 文件对于 vite 入口必然是一个 html 文件,与 vite 特性有关一开始不编译 main.js App.vue, 让我们的浏览器直接加载 html 文件通过 script 标签加载script 的 src 指向的 main.js,这个js的请求到达 vite server以后vite 查找 js 文件然后才会对它进行编译这是 vite 以 html 文件作为入口的一个很大的原因vite.config.js 存放 vite 的配置的位置vitejs/plugin-vue 官方提供的 vue3 的插件支持 App.vue 等 sfc 写法但是不支持 vue 的 jsx 的开发方式import{defineConfig}fromviteimportvuefromvitejs/plugin-vue// https://vite.dev/config/exportdefaultdefineConfig({plugins:[vue()],})如果想要在 vue 中支持 jsx 的开发方式需要下载一个官方推荐的插件 vitejs/plugin-vue-jsxpnpm i vitejs/plugin-vue-jsx -D (我们参照视频下载 1.3.10 的版本)// vite.config.jsimport{defineConfig}fromviteimportvuefromvitejs/plugin-vueimportvueJsxfromvitejs/plugin-vue-jsx// https://vite.dev/config/exportdefaultdefineConfig({plugins:[vue(),vueJsx()],})// App.jsximport{defineComponent}fromvueexportdefaultdefineComponent({setup(){return(){returndivhello,write jsxinvue3/div}}})