创建你的第一个Vue3项目

收藏

1、使用 vue-cli 创建

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。它是基于 webpack 构建，能够帮助我们快速创建项目，我们不需要花更多时间在项目的配置上。

// 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
// 安装或者升级你的@vue/cli
npm install -g @vue/cli
// 创建
vue create vue_test

在这里需要你进行一些项目的配置选项，如果不确定的话，可以先勾选默认，之后有需要再添加。

// 下载依赖启动
cd vue_test
npm install
npm run serve

除此之外你还可以使用 vue ui 通过一套图形化界面创建和管理你的所有项目，这种方法比较简单，就不再叙述了。

2、使用 vite 创建（推荐）

Vite：新一代前端构建工具，能够显著提升前端开发体验。

• 优势如下：
  • 开发环境中，无需打包操作，可快速的冷启动。
  • 轻量快速的热重载（HMR）。
  • 真正的按需编译，不再等待整个应用编译完成。

使用npm

// 创建工程
npm init vite-app <project-name>
// 进入工程目录
cd <project-name>
// 安装依赖
npm install
// 运行
npm run dev

使用yarn

// 创建
yarn create vite <project-name>
// 进入工程目录
cd <project-name>
// 安装依赖
yarn install
// 运行
yarn dev