从零搭建Vue2项目完整教程

通过VueCLI脚手架创建Vue2项目，核心文件包括入口main js、根组件App vue及index html。使用OptionsAPI组织组件逻辑，包含data、methods、computed、watch及生命周期钩子等选项，配置vue-router实现SPA路由跳转及导航守卫鉴权，还可集成Vuex和axios，并通过自定义指令、过滤器与混入增强组件

从零开始搭建 Vue 2 项目：完整教程与核心概念详解

手动构建一个 Vue 2 项目看似复杂，但实际上只需几条命令即可快速启动。下面我们从环境配置入手，逐步搭建完整项目结构，并深入解析 Options API、Vue Router 等关键知识点，帮助你快速掌握 Vue 2 开发流程。

一、前置准备与环境检查

工具名称	主要用途
Node.js	提供 npm 运行环境、支持构建工具
npm	安装依赖包、执行脚本命令
Vue CLI	一键生成 Vue 2 项目脚手架

如何确认环境已就绪？打开终端，输入以下两条命令进行验证：

node -v 
npm -v

若出现类似下图的版本号输出，则表明 Node 和 npm 已正确安装。

随后全局安装 Vue CLI（仅需执行一次）：

npm install -g @vue/cli
vue --version

二、使用脚手架创建 Vue 2 项目

1. 创建项目

进入你想要存放项目的目录，打开终端并执行：

vue create 项目名
# 示例：vue create vue2_demo

创建成功后，当前目录下会生成一个以项目名命名的文件夹（如 vue2_demo）。

2. 进入项目并启动开发服务器

在 VS Code 中打开该文件夹，然后在终端依次运行：

cd vue2_demo
npm install          # 若创建时已自动安装可跳过
npm run serve        # 启动开发模式，支持热更新

3. 三个常用命令说明

命令	作用
`npm run serve`	开发环境 + 热重载
`npm run build`	生产打包输出到 `dist/`
`npm run lint`	代码规范检查

三、脚手架生成的项目目录结构

让我们来看看脚手架自动生成的目录结构：

vue2_demo/
├── public/
│   └── index.html          # 唯一 HTML 文件，挂载点 #app
├── src/
│   ├── main.js             # 入口文件：创建 Vue 实例
│   ├── App.vue             # 根组件
│   ├── assets/             # 静态资源（图片、字体等，可选）
│   ├── components/         # 可复用的通用组件
│   ├── views/              # 页面级组件（通常对应路由）
│   ├── router/             # 路由配置文件
│   └── utils/              # 工具函数集合
├── babel.config.js         # ES6+ 转 ES5 配置
├── vue.config.js           # CLI / Webpack 配置项
├── jsconfig.json           # @ 别名配置，编辑器智能提示
├── package.json
└── .gitignore

四、最小可运行应用（核心 3 个文件）

1. `public/index.html`

页面中仅包含一个容器
Vue 会将整个组件树渲染到这个节点中

2. `src/main.js` — 应用入口

import Vue from 'vue'
import App from './App.vue'new Vue({
    render: h => h(App),
}).$mount('#app')

概念	含义
`new Vue({...})`	Vue 2 中创建应用实例的方式
`render: h => h(App)`	使用渲染函数挂载根组件
`$mount('#app')`	挂载到 `index.html` 中的 `#app` 元素

3. `src/App.vue` — 根组件（单文件组件 SFC）

<script>
export default {
    name: 'App'
}
script><style>
/* 未加 scoped 时样式会全局生效 */
style>

单文件组件（SFC）由三部分构成：