vue3创建项目的命令

喵叔

2025-03-16 50

Vue3创建项目的命令

开头解决方案

在现代前端开发中，Vue.js 是一个非常流行的框架。Vue 3 作为版本，提供了许多新特性和性能优化。要创建一个基于 Vue 3 的项目，最常用的方法是使用 Vue CLI 或 Vite 工具。这两种工具都能帮助开发者快速搭建项目结构，并提供丰富的配置选项。如何通过命令行创建 Vue 3 项目。

Vue CLI 是官方提供的脚手架工具，能够生成完整的项目模板。以下是详细步骤：

安装 Vue CLI
确保你已经安装了 Vue CLI，如果还没有安装，可以通过 npm 安装：

bash npm install -g @vue/cli
创建新项目
使用以下命令创建一个新的 Vue 3 项目：

bash vue create my-project

在执行上述命令后，CLI 会提示选择 Vue 版本（默认是 Vue 3），你可以直接按回车键确认。
进入项目目录并启动开发服务器

bash cd my-project npm run serve

这将在本地启动一个开发服务器，默认地址为 http://localhost:8080。

Vite 是由 Vue 创始人尤雨溪开发的下一代前端构建工具，具有极快的冷启动速度和热更新能力。以下是使用 Vite 创建 Vue 3 项目的步骤：

安装 Node.js 和 npm
确保你的系统中已安装 Node.js 和 npm。可以通过以下命令检查是否已安装：

bash node -v npm -v
创建 Vite 项目
使用以下命令创建一个新的 Vue 项目：

bash npm create vite@latest my-vue-app --template vue

这将会创建一个名为 my-vue-app 的项目文件夹，并自动选择 Vue 模板。
进入项目目录并安装依赖

bash cd my-vue-app npm install
启动开发服务器

bash npm run dev

访问 http://localhost:3000 即可查看项目运行效果。

如果你不想使用脚手架工具，也可以手动创建一个简单的 Vue 3 项目：

创建入口文件 index.html

html
</p>



  
  
  <title>Manual Vue 3 Project</title>


  <div id="app"></div>
  



<p>

创建 main.js 文件

javascript
import { createApp } from 'vue';
import App from './App.vue';</p>

<p>createApp(App).mount('#app');

创建 App.vue 文件

vue

  <div>
    <h1>Hello Vue 3!</h1>
  </div>
</p>


export default {
  name: 'App'
}


<p>

以上三种方法都可以帮助你快速创建一个 Vue 3 项目，具体选择哪种方式取决于你的需求和偏好。Vue CLI 和 Vite 提供了更完善的开发环境和工具链支持，而手动创建则更适合学习和理解 Vue 3 的基础结构。