步骤 1: 初始化项目目录
创建一个名为 projects
的文件夹,作为存放所有 Vite 项目的根目录。这个文件夹将容纳多个独立的 Vite 项目。
步骤 2: 创建 Vite 项目
- 右键点击
projects
文件夹并选择"在此处打开终端"或使用您偏好的代码编辑器(如 VSCode)的内置终端。 - 在终端中输入命令
pnpm create vite
并按回车开始创建过程。 - 输入您的项目名称,并再次按回车确认。
- 使用箭头键选择第二个选项
vue
以指定项目框架为 Vue,然后按回车。
- 接着选择第三个选项
Customize with create-vue
来手动配置 Vue - 对于后续的所有配置选项,保持默认设置(即
false
),直接按回车继续。
当您看到以下提示时,表示项目创建成功:
步骤 3: 安装依赖与启动开发服务器
- 使用命令
cd <项目名>
进入刚刚创建的项目文件夹。 - 执行
pnpm i
来安装项目所需的依赖包。
- 最后,运行
pnpm dev
启动开发服务器。
当您看到如下信息时,表明开发服务器已成功启动:
此时,可以通过按下 Ctrl
键并点击 http://localhost:5173/
访问您的本地项目。
步骤 4: 清理项目结构
为了简化项目,建议清理不必要的文件和代码:
- 删除
src
文件夹下除App.vue
外的所有文件。(可以选择保留空的components
文件夹) - 移除
main.js
中的import './assets/main.css'
行。 - 在
App.vue
中编写简单的模板代码,例如<template><div>Hello, World!</div></template>
,然后刷新浏览器查看更改效果。
通过遵循上述优化过的指导,您可以更高效地搭建和配置一个新的 Vite + Vue 项目环境。