DeepSeek咨询的"如何用脚手架从头开始创建一个vue3项目",结合其回答和本机运行,记录如下,纯个人备忘~
以下是使用 Vue CLI 或 Vite 创建 Vue 3 项目的完整步骤
方法一:使用 Vue CLI 创建(官方传统方式)
确保已安装 Node.js 版本18+
node -v
安装/更新 Vue CLI
npm install -g @vue/cli
创建新项目 vue create my-vue3-projectname
vue create my-vue3-cli
进入项目目录并启动
cd my-vue3-cli
npm run serve
方法二:使用 Vite 创建(推荐更快更现代的方式)
使用 npm:
需要使用create-vite@6.4.1
npm create vite@latest my-vue3-projectname --template vue
先是选择使用JavaScript的:
再是选择使用TypeScript的:可选项如下图
进入项目目录并安装依赖:
cd my-vue3-project
npm install
npm run dev
方法三:使用 Vue 官方新工具 create-vue (基于 Vite)
运行创建命令: 涉及create-vue@3.16.4
npm init vue@latest my-vue3-project
交互式选择需要的功能 (Pinia, Router, ESLint 等) 不选单元测试和端到端测试即可,日用练习
完成后的操作:
cd my-vue3-project
npm install
npm run dev
项目结构说明
创建后的典型 Vue 3 项目结构:
my-vue3-project/
├── node_modules/ # 依赖包
├── public/ # 静态资源
├── src/ # 源代码
│ ├── assets/ # 图片等资源
│ ├── components/ # Vue组件
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── package.json # 项目配置
└── vite.config.js # Vite配置(如果使用Vite)
额外建议
-
推荐使用 Vite:比传统 Vue CLI 更快更轻量
-
考虑组合式 API:Vue 3 推荐使用
setup
语法 -
添加常用插件:
- Vue Router
- Pinia (状态管理)
- Element Plus 或 Ant Design Vue (UI 框架)
创建完成后,你就可以开始在 src/
目录下开发你的 Vue 3 应用了!