创建第一个vue3项目

目录

一、使用@vue/cli作为脚手架搭建

 二、使用vitejs快速构建vite+vue3工程

---

一、使用@vue/cli作为脚手架搭建

1.全局安装@vue/cli，安装脚本如下：

npm i @vue/cli -g

或者

yarn global add @vue/cli 

2.安装完成后验证版本在v4.5以上

PS D:\WorkSpace\web\workspace-vue> vue -V
@vue/cli 5.0.4

或者

PS D:\WorkSpace\web\workspace-vue> vue --version
@vue/cli 5.0.4

3.使用vue init webpack [projectname]创建项目，安装前需要确保以下模块安装

npm i -g @vue/cli-init

执行安装命令

vue init webpack vue-init-demo

通过命令交互进行项目配置

安装完成后显示如下

执行启动命令

浏览器访问验证，成功。

4.通过 vue create [projectname]创建项目

vue create vue-create-demo

等待相关模块

 执行启动命令

cd vue-create-demo
npm run serve

 浏览器访问验证

 二、使用vitejs快速构建vite+vue3工程

1.安装命令

使用 NPM:

npm init vite@latest

使用 Yarn:

yarn create vite

使用 PNPM:

pnpm create vite

 2.等待创建过程

3.启动结果略