两种方式创建Vue项目

引言

大家好，今天我将向大家展示如何使用不同的方法创建Vue项目。我们将探索两种主要方式：利用Vue CLI命令行工具和使用Vite工具。让我们开始吧！

利用Vue命令创建Vue项目

准备工作

在开始之前，确保你的开发环境中已经安装了Node.js和npm。我们将使用npm来全局安装Vue CLI。

安装Vue CLI

首先，我们需要安装Vue CLI。打开命令行工具，执行以下命令：

npm install -g @vue/cli

这条命令会全局安装Vue CLI，使我们可以使用它来创建新的Vue项目。

创建Vue项目

方法一：使用vue init命令

1. 切换工作目录：
   打开命令行，切换到你想创建新项目的目录。
2. 创建Vue项目：
   执行命令：

   vue init webpack vue3-demo
   

   按照提示输入项目名称、描述、作者等信息。

方法二：使用vue create命令

1. 创建Vue项目
   执行命令：

   vue create vue3-demo-2
   

   选择默认预设，直接按回车键。

启动Vue项目

1. 启动vue3-demo项目

   cd vue3-demo
   npm run dev
   

   访问 http://localhost:8080 查看项目首页。

2. 启动vue3-demo-2项目

   cd ../vue3-demo-2
   npm run serve
   

   同样访问 http://localhost:8080 查看项目首页。

利用Vite工具创建Vue项目

概述

Vite是一个新的构建工具，它提供了快速的热重载和构建性能。我们将使用Vite来创建一个Vue项目。

利用Vite创建项目

1. 切换到工作目录
   打开命令行，切换到你想创建新项目的目录。

2. 基于模板创建项目
   使用yarn创建一个基于Vite+Vue模板的项目，执行命令：

   yarn create vite hello-vite --template vue
   

启动项目

1. 安装项目依赖
   进入项目目录，执行命令：

   yarn
   

2. 启动服务
   执行命令：

   yarn dev
   

   访问 http://localhost:5173 查看项目首页。

3. 项目交互
   在浏览器中，你可以看到项目首页，并尝试点击按钮来计数。

结语

今天我们一起学习了如何使用Vue CLI和Vite创建Vue项目。这两种方法各有优势，Vue CLI提供了更多的配置选项，而Vite则提供了更快的开发体验。希望这能帮助你在开发Vue应用时做出更好的选择。谢谢大家！