怎么做第一个vue.js项目

admin 2026年02月15日 18:09 104 0

创建第一个Vue.js项目需先安装Node.js，确保环境具备，通过npm全局安装Vue CLI：npm install -g @vue/cli，随后执行vue create my-first-project创建项目（可手动选择配置或默认），进入项目目录，运行npm run serve启动开发服务器，浏览器访问localhost:8080查看初始页面，在src/components中修改组件文件，编写模板、脚本与样式实现功能，开发完成后，用npm run build打包项目，生成dist目录下的静态文件，过程中可查阅官方文档，逐步熟悉Vue的组件化开发模式。

如何创建你的第一个Vue.js项目

Vue.js 是一款渐进式 JavaScript 框架，以其轻量级、高度灵活和易于上手的特性，迅速成为前端开发领域的热门选择，无论你是刚踏入前端世界的新手，还是希望尝试 Vue.js 的开发者，本文将为你提供一份详尽的指南，从环境搭建到项目运行，逐步引导你完成第一个 Vue.js 项目的创建，助你轻松入门前端框架开发。

前置准备：开发环境搭建

在正式开始项目开发之前,我们需要先配置两个核心工具：Node.js 和 npm（Node Package Manager），Vue.js 项目依赖于 Node.js 运行环境，而 npm 则负责管理和安装项目所需的依赖包。

安装 Node.js

Node.js 是一个基于 Chrome V8 引擎构建的 JavaScript 运行时环境，它让 JavaScript 能够在服务器端运行，npm 会随 Node.js 一同安装，用于管理项目所需的各类包。

下载地址：访问 Node.js 官网，建议下载 LTS（长期支持）版本（对新手而言，此版本稳定性高且兼容性更好）。
安装步骤：下载完成后双击安装包，按照向导提示点击"下一步"即可（Windows 用户请务必勾选"Add to PATH"选项，以便在命令行中直接使用 node 和 npm 命令）。
验证安装：安装完成后，打开命令行工具（Windows 用户可搜索"cmd"或"PowerShell"，Mac 用户可打开"终端"），输入以下命令：
```
node -v  # 查看 Node.js 版本
npm -v   # 查看 npm 版本
```
如果显示版本号（如 v18.17.0、5.0），说明安装成功。

安装 Vue CLI（推荐）

Vue CLI（Vue Command Line Interface）是 Vue.js 官方提供的项目脚手架工具，能够快速创建标准化的 Vue 项目，自动配置好开发环境（如 webpack、babel 等），让开发者能够专注于业务逻辑的实现。

安装命令：在命令行中输入以下命令进行全局安装（-g 参数表示全局安装）：
```
npm install -g @vue/cli
```
验证安装：安装完成后，输入以下命令检查版本：
```
vue --version
```
如果显示版本号（如 0.8），说明 Vue CLI 安装成功。

创建第一个 Vue.js 项目

准备工作完成后,我们就可以使用 Vue CLI 创建项目了，本文以 Vue 3 为例（当前主流版本），Vue 2 的流程类似，但部分选项会有所不同。

运行创建命令

在命令行中,进入你希望创建项目的目录（如 D:\projects 或 ~/projects），然后输入：

vue create my-first-vue-project

my-first-vue-project 是你的项目名称，可以根据需要自定义（建议使用小写字母、数字和连字符，避免空格和特殊字符）。

选择项目预设

命令运行后,Vue CLI 会提示你选择项目预设，主要有两个选项：

Default (Vue 3)：默认预设，包含 Vue 3 + Babel + Router + Vuex（状态管理），适合大多数新手项目。
Manually select features：手动选择功能，可以勾选/取消勾选 Router、Vuex、TypeScript、Linter 等功能。

新手推荐选择 Default (Vue 3)，直接按回车键即可，Vue CLI 会自动下载并配置所需依赖。

等待项目初始化

选择预设后,Vue CLI 会开始下载依赖（首次安装可能需要几分钟，具体取决于网络速度），下载完成后，项目目录结构会自动生成，并显示"Successfully created project my-first-vue-project!"的提示信息。

项目结构解析

创建成功后,使用代码编辑器（如 VS Code）打开项目文件夹（my-first-vue-project），你会看到以下核心文件和目录：

核心目录

src/：源代码目录，所有开发文件都存放在这里。
- main.js：项目入口文件，负责初始化 Vue 实例，并将其挂载到 DOM。
- App.vue：根组件，是整个应用的顶层组件，其他组件都会嵌套在它内部。
- components/：组件目录，存放可复用的 Vue 组件（如 HelloWorld.vue 是默认示例组件）。
- assets/：静态资源目录，存放图片、样式文件（如 CSS、Less）等。
- router/：路由配置目录（如果选择了 Router），用于管理页面跳转逻辑。
- store/：状态管理目录（如果选择了 Vuex），用于集中管理应用数据。
public/：公共资源目录，存放不需要编译的静态文件（如 index.html 是项目入口 HTML 文件）。
package.json：项目配置文件，定义了项目依赖、脚本命令等信息。

关键文件说明

public/index.html：浏览器访问的 HTML 模板，Vue CLI 会自动将 main.js 编译后的 JS 文件注入到这个模板中。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">my-first-vue-project</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>