最近不忙,一直写React,所以打算重温一下Vue的东西,从创建项目开始,有兴趣的可以了解一下。
先说下前置条件:
node版本在18.3以上
(vue2可能不需要这么高的版本)
输入: node –v
,查看node版本
一、基于vue-cli搭建
@vue/cli版本在4.5.0以上,vue2不需要,但是尽量使用高版本吧。
未安装或版本过低,安装或者升级你的@vue/cli

输入:npm install -g @vue/cli
1. 项目创建
vue create vue3_test
选择 Vue3,babel, eslint,包管理器(pnpm,npm,yarn)。ps:键盘上下键控制选择

2、项目启动
输入:cd vue3_test 到达项目根目录 输入:`pnpm run serve` 启动项目

二、基于vite搭建(推荐)
vite 是新一代前端构建工具,vite的优势如下:
- 轻量快速的热重载(HMR),能实现极速的服务启动。
- 对 TypeScript、JSX、CSS 等支持开箱即用。
- 真正的按需编译,不再等待整个应用编译完成。
1. 项目创建
输入项目创建命令 pnpm create vite
输入项目名字,选择vue框架,TypeScript
E:\Workspace\FrontEndProject\Vue3Project>pnpm create vite
.../19130b8c8bd-60b8 | +1 +
.../19130b8c8bd-60b8 | Progress: resolved 1, reused 0, downloaded 1, added 1, done
√ Project name: ... vue3-test
√ Select a framework: » Vue
√ Select a variant: » TypeScript
Scaffolding project in E:\Workspace\FrontEndProject\Vue3Project\vue3-test...
Done. Now run:
cd vue3-test
pnpm install
pnpm run dev
2. 项目启动
输入:cd vue3_test 到达项目根目录
输入:pnpm install 安装项目所需依赖
输入:pnpm run dev 启动项目
启动成功后出现地址 http://localhost:5173/ 复制到浏览器打开,或按住Ctrl键点击命令行里的地址打开。

三、通过create-vue搭建
1. 项目创建
输入项目创建命令 pnpm create vue@latest
输入项目名字,根据需求安装插件,没安装的插件后面在项目中也可以手动安装
ps:键盘左右选择 是/否
E:\Workspace\FrontEndProject\Vue3Project>pnpm create vue@latest
.../19130c78fdf-37c8 | +1 +
.../19130c78fdf-37c8 | Progress: resolved 1, reused 0, downloaded 1, added 1, done
Vue.js - The Progressive JavaScript Framework
√ 请输入项目名称: ... vue3-test
√ 是否使用 TypeScript 语法? ... 否 / 是
√ 是否启用 JSX 支持? ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是
√ 是否引入 Pinia 用于状态管理? ... 否 / 是
√ 是否引入 Vitest 用于单元测试? ... 否 / 是
√ 是否要引入一款端到端(End to End)测试工具? » 不需要
√ 是否引入 ESLint 用于代码质量检测? ... 否 / 是
√ 是否引入 Prettier 用于代码格式化? ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是
正在初始化项目 E:\Workspace\FrontEndProject\Vue3Project\vue3-test...
项目初始化完成,可执行以下命令:
cd vue3-test
pnpm install
pnpm dev
2. 项目启动
输入:cd vue3_test 到达项目根目录
输入:pnpm install 安装项目所需依赖
输入:pnpm run dev 启动项目
启动成功后出现地址 http://localhost:5173/, 复制到浏览器打开,或按住Ctrl键点击命令行里的地址打开
