前端新手如何搭建 Vue 框架：从零开始的完整指南

最新推荐文章于 2025-10-03 15:20:57 发布

原创最新推荐文章于 2025-10-03 15:20:57 发布 · 1k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

一、准备工作：安装必要的工具

在开始搭建 Vue 框架之前，我们需要先安装一些必要的工具。

1. 安装 Node.js

Vue 的构建工具依赖于 Node.js 环境，所以首先需要安装 Node.js。

访问 Node.js 官网：https://nodejs.org /

推荐下载 LTS（长期支持）版本，对于新手来说更稳定

按照安装向导完成安装（Windows 用户注意勾选 "Add to PATH" 选项）

安装完成后，打开命令行工具（Windows 的 CMD 或 PowerShell，Mac 的终端），输入以下命令验证安装是否成功：

node -v
npm -v

如果能看到版本号，说明 Node.js 和 npm（Node 包管理器）已经成功安装。

2. 安装 Vue CLI

Vue CLI 是 Vue 官方提供的脚手架工具，能帮助我们快速创建和管理 Vue 项目。

在命令行中输入以下命令安装 Vue CLI：

npm install -g @vue/cli

安装完成后，输入以下命令验证：

vue --version

如果看到版本号，说明 Vue CLI 安装成功。

二、创建第一个 Vue 项目

使用 Vue CLI 创建项目非常简单，只需几个命令即可完成。

1. 生成项目

在命令行中，进入你想要创建项目的目录，然后输入：

vue create my-first-vue-app

这里的 "my-first-vue-app" 是你的项目名称，可以根据需要修改。

2. 选择配置

运行上述命令后，会出现配置选项：

对于新手，推荐选择 "Default ([Vue 3] babel, eslint)" 选项，这是 Vue 3 的默认配置

如果你熟悉 Vue 2，可以选择 Vue 2 的配置

高级用户可以选择 "Manually select features" 进行自定义配置

使用上下箭头键选择，按 Enter 确认。

3. 等待项目创建

选择配置后，Vue CLI 会自动下载必要的依赖包并创建项目结构，这个过程可能需要几分钟时间，取决于你的网络速度。

三、运行 Vue 应用

项目创建完成后，进入项目目录并启动开发服务器：

cd my-first-vue-app
npm run serve

执行成功后，你会看到类似以下的输出：

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.100:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

现在，打开浏览器访问http://localhost:8080，你就能看到 Vue 的欢迎页面了，这意味着你的 Vue 框架已经成功搭建！

四、了解 Vue 项目结构

让我们简单了解一下 Vue 项目的基本结构，这有助于你后续开发：

my-first-vue-app/
├── node_modules/     # 项目依赖包
├── public/           # 静态资源
│   ├── index.html    # 入口HTML文件
│   └── favicon.ico   # 网站图标
├── src/              # 源代码目录
│   ├── assets/       # 资产文件（图片、样式等）
│   ├── components/   # 组件目录
│   ├── App.vue       # 根组件
│   └── main.js       # 入口JavaScript文件
├── .gitignore        # Git忽略文件配置
├── babel.config.js   # Babel配置
├── package.json      # 项目依赖和脚本配置
└── README.md         # 项目说明文档

最常用的文件是：

src/App.vue：应用的根组件

src/components/：存放自定义组件的目录

src/main.js：应用的入口文件

五、修改并运行第一个组件

让我们来修改默认的 Vue 组件，体验一下 Vue 开发：

打开src/components/HelloWorld.vue文件

找到<h1>标签，将内容修改为 "Hello, My First Vue App!"

保存文件

此时，你会发现浏览器中的页面自动更新了，这是因为 Vue 的开发服务器支持热重载功能，无需手动刷新页面。

六、使用 Vue 3 的组合式 API（可选）

如果你选择了 Vue 3，推荐学习使用组合式 API，这是 Vue 3 的新特性。下面是一个简单的示例：

Vue 3 组合式 API 示例组件

<template>
  <div class="counter">
    <h2>计数器: {{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const count = ref(0);

// 定义方法
const increment = () => {
  count.value++;
};

const decrement = () => {
  count.value--;
};
</script>

<style scoped>
.counter {
  text-align: center;
  margin: 20px;
}

button {
  margin: 0 10px;
  padding: 5px 10px;
}
</style>

要使用这个组件，你需要修改src/App.vue文件，引入并使用它

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Counter />
  </div>
</template>

<script setup>
import Counter from './components/Counter.vue'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

保存后，浏览器会自动更新，你将看到一个简单的计数器组件。

七、构建生产版本

当你的应用开发完成，准备部署时，可以使用以下命令构建生产版本：