从零实现一个vue2项目

一、前置准备

标题	作用
Node.js	运行 npm、构建工具
npm	装依赖、跑脚本
vue cli	一键生成 Vue 2 工程

检查方法

powershell 复制代码

node -v 
npm -v

出现下图结果就表示已经安装

全局安装 Vue CLI（只需一次）：

powershell 复制代码

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

二、用脚手架创建项目

1.创建

进入你想要创建项目的目录，打开终端然后运行以下命令创建一个新的 Vue 项目：

powershell 复制代码

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

创建成功后会在该目录中生成一个以该项目名命名的文件夹，如vue2_demo

2.进入并启动

后续在vs code打开刚刚创建的项目文件夹，然后在终端执行如下命令：

powershell 复制代码

cd vue2_demo
npm install          # 若 create 时已装过可跳过
npm run serve        # 开发：http://localhost:8080

3. 三个常用命令

命令	作用
`npm run serve`	开发 + 热更新
`npm run build`	打包到 `dist/`
`npm run lint`	代码检查

三、生成后的目录结构

js 复制代码

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`

页面里只有一个 <div id="app"></div>
Vue 会把整棵组件树渲染进这个节点

2. `src/main.js` --- 启动应用

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）

js 复制代码

<template>
    <div id="app">
    <!-- 页面结构 -->
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

<style>
/* 无 scoped 时样式全局生效 */
</style>

SFC 三块：<template> 结构、<script> 逻辑、<style> 样式。

五、单文件组件基础（Options API）

Options API 指：在组件的 export default { ... } 里，用固定的选项名（data、methods、computed 等）组织逻辑。

结构一览

js 复制代码

export default {
    name: 'HomePage',            // 组件名（调试、keep-alive 用）
    components: { },             // 注册子组件
    props: { },                  // 父组件传入的数据
    data() { return { } },       // 本组件状态（必须是函数）
    computed: { },               // 派生数据（有缓存）
    watch: { },                 // 监听数据变化
    methods: { },               // 事件、业务方法

    // 生命周期
    beforeCreate() { },
    created() { },
    beforeMount() { },
    mounted() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
}

模板里用 {{ }}、v-on、v-model 绑定的，都来自这些选项里的数据和方法。

各选项做什么

`data` --- 组件自己的状态

必须是函数，返回对象（保证每个实例一份独立数据）：

js 复制代码

data() {
    return {
        title: '这是首页',
        count: 0,
        todos: []
    }
}

模板：{{ title }}、v-model="title"。

`methods` --- 方法（无缓存）

点击、提交等逻辑放这里：

js 复制代码

methods: {
    add() {
        this.count++
    }
}

模板：@click="add"。

在 Options API 里，methods、data、computed 里都要用 this 访问同组件上的东西。

`computed` --- 计算属性（有缓存）

依赖的数据不变时，不会重复算；适合「展示用派生值」：

js 复制代码

computed: {
    double() {
        return this.count * 2
    }
}

和 methods 的区别：

computed：像属性一样用 {{ double }}，有缓存
methods：每次调用都执行，如 {{ calc() }}

`watch` --- 数据变了再做事

适合异步、打接口、复杂副作用：

js 复制代码

watch: {
    count(newVal, oldVal) {
        console.log(newVal, oldVal)
    }
}

简单派生优先用 computed，不必什么都 watch。

`props` --- 父传子（只读）

父：<HomePage msg="hello" />

子：

js 复制代码

props: {
    msg: {
        type: String,
        default: ''
    }
}

子组件不要直接改 props，应 $emit 通知父组件改。

`components` --- 注册子组件

你在 App.vue 里会这样用（Options API 典型写法）：

js 复制代码

import HomePage from '@/views/homePage.vue'
export default {
    name: 'App',
    components: {
        HomePage
    }
}

模板：<HomePage />。

生命周期（Vue 2 最常记 4 个）

钩子	时机	常见用途
`created`	实例创建完，DOM 还没有	调接口、初始化数据
`mounted`	挂载到 `#app` 之后	操作 DOM、第三方库初始化
`beforeDestroy`	实例销毁前	清定时器、解绑事件
`destroyed`	销毁后	收尾

常用模板语法

文本：{{ msg }}
属性：:src="url"
事件：@click="fn"
条件：v-if / v-else
列表：v-for="item in list" :key="item.id"
双向绑定：v-model="text"

六、Vue Router

Vue Router 是 Vue 官方的前端路由库：根据 URL 决定显示哪个页面组件，在不刷新整页的情况下切换「页面」，实现单页应用（SPA）。使用vue cli脚手架创建的项目只有一个最简单页面，后续进行不同页面跳转可以按如下方法配置。

1. 安装

powershell 复制代码

npm install vue-router@3

Vue 2 必须用 vue-router 3.x，不要用 4.x。

2. 新建 `src/router/index.js`

js 复制代码

import Vue from 'vue'
import VueRouter from 'vue-router'

//
import HomePage from '@/views/homePage.vue'
import LoginPage from '@/views/loginPage.vue'

// 
Vue.use(VueRouter)

// 配置路由组件映射
const routes = [
    { path: '/login', component: LoginPage },
    { path: '/', component: HomePage },
    { path: '*', redirect: '/404' } // 未匹配路由（可选）
]

// 创建路由实例
const router = new VueRouter({
    mode: 'hash', // 或 'history'（需服务器配合）
    routes
})

export default router

3. 修改 `main.js`

在 Vue 实例中挂载

js 复制代码

import router from './router'

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

4. 修改 `App.vue` --- 路由出口

html 复制代码

<template>
    <div id="app">
        <!-- 路由组件在router-view中显示 -->
        <router-view></router-view>
    </div>
</template>

原理：URL 变化 → 匹配 routes → 在 <router-view> 里渲染对应组件。

5. 页面跳转

html 复制代码

<!-- 声明式 -->
<router-link to="/">首页</router-link>

<!-- 编程式 -->
this.$router.push('/login')

6. 路由守卫（登录鉴权）

js 复制代码

router.beforeEach((to, from, next) => {
    if (to.path !== '/login' && !isAuthenticated()) {
        next('/login')
    } else {
        next()
    }
})

这样一个最基础的vue2项目骨架就搭建起来了。😃

从零实现一个vue2项目