vue入门练习笔记-自用

0 阅读1分钟

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

image.png

进入项目目录并启动

cd my-vue3-cli
npm run serve

方法二:使用 Vite 创建(推荐更快更现代的方式)

使用 npm:

需要使用create-vite@6.4.1

npm create vite@latest my-vue3-projectname --template vue

先是选择使用JavaScript的:

image.png

image.png 再是选择使用TypeScript的:可选项如下图

image.png

image.png

进入项目目录并安装依赖:

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

image.png

交互式选择需要的功能 (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)

额外建议

  1. 推荐使用 Vite:比传统 Vue CLI 更快更轻量

  2. 考虑组合式 API:Vue 3 推荐使用 setup 语法

  3. 添加常用插件

    • Vue Router
    • Pinia (状态管理)
    • Element Plus 或 Ant Design Vue (UI 框架)

创建完成后,你就可以开始在 src/ 目录下开发你的 Vue 3 应用了!