Vue新手入门教程：从零开始学习Vue框架

2024/11/23 0:03:34

本文主要是介绍Vue新手入门教程：从零开始学习Vue框架，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

Vue.js是一个前端开发框架，它允许使用简单的语法和模板构建动态用户界面，并提供双向数据绑定、组件化开发等功能，使得开发大型前端应用变得简单灵活。文章详细介绍了Vue的特点、安装环境以及基本语法，涵盖了从数据绑定到组件化开发的各个方面。

Vue简介与安装

什么是Vue

Vue.js 是一个前端开发框架，它允许你使用简单的语法和模板来构建动态的用户界面。Vue 提供了数据绑定和组件化开发的功能，使得开发大型的前端应用变得容易。Vue 以渐进的方式集成，你可以逐步将 Vue 引入到现有的项目中，也可以使用 Vue 来创建全新的应用。

Vue 的核心库专注于视图层，它非常轻量，只关注视图层的构建与渲染，这意味着 Vue 可以非常灵活地与其他工具及库配合使用。Vue的核心无需任何DOM、浏览器或网络的具体知识，这使得它可以在各种环境下运行，包括服务端渲染、客户端渲染，甚至是微信小程序等。

Vue的特点

Vue 具有以下特点：

双向数据绑定：Vue 提供了双向数据绑定功能，这使得数据的变化可以自动反映在视图中，反之亦然。
轻量级：Vue 的核心库非常小，便于在各种项目中使用，无论是大型应用还是小规模的项目。
模板语法：Vue 使用基于 HTML 的模板语法来构建视图，这使得编写界面变得直观和简单。
组件化：Vue 支持组件化开发，你可以将代码拆解为可重用的组件，这有助于维护和代码复用。
虚拟DOM：Vue 使用虚拟DOM来提高渲染性能，只对需要更新的部分进行重新渲染，而不是整个视图。
高度可定制：Vue 提供了丰富的 API，你可以根据项目需求进行定制开发。

安装Vue环境

为了开始使用 Vue，你需要安装 Vue.js。有多种方式可以将 Vue 引入到项目中。最简单的方法是通过 CDN，这是一种在网页中直接引入 Vue 的方式。在你的 HTML 文件中，你可以通过以下方式引入 Vue：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个Vue应用</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: '你好，Vue!'
                }
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

另一种方式是通过 npm 安装 Vue，这种方式适合于大型项目。首先，你需要确保你已经安装了 Node.js 和 npm。然后，你可以在项目目录中运行以下命令来安装 Vue：

npm install vue@3.2.26

安装完成后，你可以在你的项目中通过导入 Vue 来使用它：

import Vue from 'vue';

创建第一个Vue应用

在浏览器中打开上述的 HTML 文件，你会看到一个页面显示“你好，Vue!”。这证明了 Vue 的基本引入和渲染已经成功。

接下来，我们将创建一个更简单的应用来展示 Vue 的基本用法。这是一个在 HTML 中使用 Vue 的简单示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个Vue应用</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <p>{{ description }}</p>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    title: 'Vue入门教程',
                    description: '这是一个Vue框架的入门教程'
                }
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

这个例子中，我们定义了两个数据属性 title 和 description，并在 HTML 中使用了双大括号语法 {{ }} 来绑定这些属性。当 Vue 实例被挂载到指定的元素上时，Vue 会自动将数据属性的值插入到模板中。

Vue的基本语法

模板语法

Vue 使用基于 HTML 的模板语法来构建用户界面。在模板中，你可以直接使用 Vue 提供的各种指令和特殊语法。下面是一些基本的模板语法：

变量绑定

在 HTML 中，你可以使用 {{ variable }} 这样的语法来将变量插入到模板中。比如：

<div id="app">
    <p>{{ message }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '这是变量绑定'
            }
        }
    });
    app.mount('#app');
</script>

属性绑定

你可以使用 v-bind (缩写为 :) 指令来绑定 HTML 属性：

<div id="app">
    <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageSrc" alt="绑定属性示例">
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                imageSrc: 'https://example.com/image.png'
            }
        }
    });
    app.mount('#app');
</script>

事件绑定

你可以使用 v-on (缩写为 @) 指令来绑定事件处理函数：

<div id="app">
    <button @click="handleClick">点击我</button>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '按钮点击'
            }
        },
        methods: {
            handleClick() {
                console.log(this.message);
            }
        }
    });
    app.mount('#app');
</script>

表单绑定

Vue 还支持表单双向绑定，这使得表单输入可以实时反映数据的变化：

<div id="app">
    <input v-model="inputValue">
    <p>输入内容：{{ inputValue }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                inputValue: ''
            }
        }
    });
    app.mount('#app');
</script>

数据绑定

数据绑定是 Vue 最重要的特性之一。Vue 使用 data 函数来提供数据源，并通过模板语法将数据绑定到 DOM 中。

插值

插值是数据绑定的一种形式，它使数据可以动态地显示在模板中。在上面的例子中，我们已经看到了插值的用法：

<div id="app">
    <p>{{ message }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '这是插值示例'
            }
        }
    });
    app.mount('#app');
</script>

事件处理

你可以在模板中直接绑定事件处理函数，并在这些函数中修改数据，进而更新 DOM：

<div id="app">
    <button @click="incrementCount">点击增量</button>
    <p>{{ count }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                count: 0
            }
        },
        methods: {
            incrementCount() {
                this.count++;
            }
        }
    });
    app.mount('#app');
</script>

表单绑定

Vue 的 v-model 指令允许你直接绑定表单元素的输入值：

<div id="app">
    <input v-model="inputText">
    <p>输入值：{{ inputText }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                inputText: ''
            }
        }
    });
    app.mount('#app');
</script>

计算属性与方法

在 Vue 中，计算属性（computed properties）和方法（methods）都是用来处理数据的，但它们有一些重要的区别。

计算属性

计算属性是一种依赖于数据的属性，当数据发生变化时，计算属性也会被重新计算。计算属性在模板中使用时会缓存结果，只有在依赖的数据发生变化时才会重新计算。

<div id="app">
    <p>原始值：{{ originalValue }}</p>
    <p>计算后的值：{{ computedValue }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                originalValue: 10
            }
        },
        computed: {
            computedValue() {
                return this.originalValue * 10;
            }
        }
    });
    app.mount('#app');
</script>

方法

方法是普通函数，它们可以访问 this 上的数据，并且没有自动缓存机制。适合于复杂的逻辑处理，或与其他方法和计算属性进行交互。

<div id="app">
    <p>原始值：{{ originalValue }}</p>
    <p>方法返回的值：{{ methodResult }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                originalValue: 10
            }
        },
        methods: {
            methodResult() {
                return this.originalValue * 10;
            }
        }
    });
    app.mount('#app');
</script>

指令

Vue 提供了一系列的指令来操作 DOM，这些指令可以直接在模板中使用。

v-if 和 v-show

v-if 和 v-show 都是用来根据条件显示元素的。

<div id="app">
    <p v-if="show">显示文本</p>
    <p v-show="show">显示文本</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                show: true
            }
        }
    });
    app.mount('#app');
</script>

v-for

v-for 用来基于一个数组或对象来循环生成内容。

<div id="app">
    <ul>
        <li v-for="item in items">{{ item }}</li>
    </ul>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                items: ['apple', 'banana', 'orange']
            }
        }
    });
    app.mount('#app');
</script>

v-bind 和 v-model

v-bind 用来绑定元素的属性，而 v-model 用于双向数据绑定。

<div id="app">
    <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageSrc" alt="图片">
    <input v-model="inputValue" placeholder="输入文本">
    <p>输入值: {{ inputValue }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                imageSrc: 'https://example.com/image.png',
                inputValue: ''
            }
        }
    });
    app.mount('#app');
</script>

v-on

v-on 用来绑定事件处理器。

<div id="app">
    <button @click="handleClick">点击我</button>
</div>
<script>
    const app = Vue.createApp({
        methods: {
            handleClick() {
                console.log('按钮被点击了');
            }
        }
    });
    app.mount('#app');
</script>

Vue的组件化开发

什么是组件

组件是 Vue 中非常重要的一环。组件是一种可重用的封装，它封装了 HTML、CSS 和 JavaScript 代码。组件通常用来构建具有独立功能的小单元，这些小单元可以被组合成更大的应用。

每个 Vue 组件都有以下部分：

模板：定义组件的 HTML 结构。
数据：定义组件的状态。
方法：定义组件的行为。
生命周期钩子：定义组件的生命周期函数。
计算属性：计算组件的状态。

创建组件

组件可以用多种方式创建。最常见的方式是定义一个 JavaScript 对象，然后通过 Vue 的 component 方法注册这个组件。

<div id="app">
    <my-component></my-component>
</div>
<script>
    const MyComponent = {
        template: '<div>这是一个组件</div>'
    };
    const app = Vue.createApp({});
    app.component('my-component', MyComponent);
    app.mount('#app');
</script>

使用组件

在定义好组件之后，你就可以在 Vue 的模板中使用它们了。使用 <组件名> 的形式来引用组件。

<div id="app">
    <my-component></my-component>
</div>
<script>
    const MyComponent = {
        template: '<div>这是一个组件</div>'
    };
    const app = Vue.createApp({});
    app.component('my-component', MyComponent);
    app.mount('#app');
</script>

属性和插槽

组件可以接受属性（props）和插槽（slots）来定制其行为和内容。

<div id="app">
    <my-component message="Hello"></my-component>
</div>
<script>
    const MyComponent = {
        props: ['message'],
        template: '<div>{{ message }}</div>'
    };
    const app = Vue.createApp({});
    app.component('my-component', MyComponent);
    app.mount('#app');
</script>

插槽用于插入内容到组件的特定位置：

<div id="app">
    <my-component>
        <h1 slot="header">自定义头部</h1>
        <p>自定义内容</p>
    </my-component>
</div>
<script>
    const MyComponent = {
        template: `
            <div>
                <slot name="header"></slot>
                <slot></slot>
            </div>
        `
    };
    const app = Vue.createApp({});
    app.component('my-component', MyComponent);
    app.mount('#app');
</script>

组件之间的通信

在 Vue 中，组件可以通过父组件向子组件传递数据，也可以通过子组件向父组件传递数据。主要有以下几种方式：

父组件向子组件传递数据

父组件可以通过 props 向子组件传递数据：

<div id="app">
    <child-component message="这是从父组件传递来的"></child-component>
</div>
<script>
    const ChildComponent = {
        props: ['message'],
        template: '<div>{{ message }}</div>'
    };
    const app = Vue.createApp({});
    app.component('child-component', ChildComponent);
    app.mount('#app');
</script>

子组件向父组件传递数据

子组件可以使用 v-on 和 v-model 向父组件传递数据：

<div id="app">
    <child-component @message="handleMessage"></child-component>
    <p>{{ message }}</p>
</div>
<script>
    const ChildComponent = {
        template: `
            <button @click="sendMessage">发送消息</button>
        `,
        methods: {
            sendMessage() {
                this.$emit('message', '这是从子组件传递来的');
            }
        }
    };
    const app = Vue.createApp({
        data() {
            return {
                message: ''
            };
        },
        methods: {
            handleMessage(message) {
                this.message = message;
            }
        }
    });
    app.component('child-component', ChildComponent);
    app.mount('#app');
</script>

组件间的数据共享

对于更复杂的组件间通信，例如跨层级通信，可以使用 Vue 的 $emit 和 $on 方法或 Vuex 状态管理库。

Vue的状态管理

Vuex简介

Vuex 是 Vue 的官方状态管理库。它基于 Vue 的响应式系统，提供了一个专为管理应用状态设计的集中式存储方式。通过 Vuex，你可以集中管理整个应用的状态，使得状态的管理和更新变得简单且高效。

安装和配置Vuex

首先，你需要通过 npm 安装 Vuex：

npm install vuex@4.0.2

然后，你可以创建一个新的 Vuex 实例，并配置它：

import { createStore } from 'vuex';

const store = createStore({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        increment({ commit }) {
            commit('increment');
        }
    }
});

使用Vuex管理状态

在 Vue 组件中，你可以通过 mapState 和 mapActions 来访问 Vuex 中的状态和动作：

<div id="app">
    <p>{{ count }}</p>
    <button @click="increment">点击增量</button>
</div>
<script>
    import { mapState, mapActions } from 'vuex';
    import store from './store';

    const app = Vue.createApp({
        computed: {
            ...mapState(['count'])
        },
        methods: {
            ...mapActions(['increment'])
        }
    });
    app.use(store);
    app.mount('#app');
</script>

实战案例：购物车管理

假设我们正在开发一个在线购物车应用，需要管理添加到购物车的商品数量。我们可以使用 Vuex 来管理这个状态：

import { createStore } from 'vuex';

const store = createStore({
    state: {
        cart: []
    },
    mutations: {
        addToCart(state, item) {
            state.cart.push(item);
        },
        removeFromCart(state, item) {
            state.cart = state.cart.filter(i => i.id !== item.id);
        }
    },
    actions: {
        addToCart({ commit }, item) {
            commit('addToCart', item);
        },
        removeFromCart({ commit }, item) {
            commit('removeFromCart', item);
        }
    }
});

在 Vue 组件中，你可以通过 Vuex 管理购物车的状态：

<div id="app">
    <ul>
        <li v-for="item in cart">
            {{ item.name }} - {{ item.quantity }}
        </li>
    </ul>
    <button @click="addProduct">添加商品</button>
    <button @click="removeProduct">移除商品</button>
</div>
<script>
    import { mapState, mapActions } from 'vuex';
    import store from './store';

    const app = Vue.createApp({
        computed: {
            ...mapState(['cart'])
        },
        methods: {
            ...mapActions(['addToCart', 'removeFromCart']),
            addProduct() {
                this.addToCart({ id: 1, name: '商品A', quantity: 1 });
            },
            removeProduct() {
                this.removeFromCart({ id: 1, name: '商品A', quantity: 1 });
            }
        }
    });
    app.use(store);
    app.mount('#app');
</script>
``

# Vue的生命周期
## 生命周期钩子
Vue 的每个组件都有一个生命周期，从创建到销毁，每个阶段都会执行一些特定的生命周期钩子。每个钩子在不同的阶段都会被触发，生命周期钩子可以用来执行一些特定的任务，比如初始化 DOM 元素，设置监听器，清理资源等。

Vue 的生命周期钩子包括：
- **beforeCreate**：在实例初始化之前，数据观察者尚未初始化，此时 `this` 上的 `data` 和 `props` 不能访问。
- **created**：实例初始化完成，此时已经可以访问 `this.data` 和 `this.props`，但 DOM 还未挂载。
- **beforeMount**：在挂载开始之前被调用，此时已创建好 `this.$el`，但未挂载到实际 DOM 中。
- **mounted**：挂载完成，此时 `this.$el` 被挂载到实例的 DOM 上。
- **beforeUpdate**：数据更新时调用，发生在虚拟 DOM 打补丁之前。
- **updated**：更新完成，此时 `this.$el` 被更新。
- **beforeDestroy**：组件实例销毁之前调用，此时可以执行一些清理工作。
- **destroyed**：组件实例销毁之后调用。

### 创建钩子
`beforeCreate` 和 `created` 钩子在实例创建阶段执行。`beforeCreate` 时数据尚未初始化，`created` 时数据已经初始化。

```html
<div id="app">
    <p>{{ message }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '生命周期测试'
            };
        },
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            console.log('created');
            this.message = '生命周期测试';
        }
    });
    app.mount('#app');
</script>

挂载钩子

beforeMount 和 mounted 钩子在挂载阶段执行。beforeMount 时 DOM 尚未挂载到实例上，mounted 时 DOM 已经挂载。

<div id="app">
    <p>{{ message }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '生命周期测试'
            };
        },
        beforeMount() {
            console.log('beforeMount');
        },
        mounted() {
            console.log('mounted');
        }
    });
    app.mount('#app');
</script>

更新钩子

beforeUpdate 和 updated 钩子在更新阶段执行。beforeUpdate 时 DOM 尚未更新，updated 时 DOM 已经更新。

<div id="app">
    <p>{{ message }}</p>
    <button @click="toggleMessage">切换消息</button>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '生命周期测试'
            };
        },
        methods: {
            toggleMessage() {
                this.message = this.message === '生命周期测试' ? '生命周期测试切换' : '生命周期测试';
            }
        },
        beforeUpdate() {
            console.log('beforeUpdate');
        },
        updated() {
            console.log('updated');
        }
    });
    app.mount('#app');
</script>

销毁钩子

beforeDestroy 和 destroyed 钩子在销毁阶段执行。beforeDestroy 时实例仍然有效，destroyed 时实例已经销毁。

<div id="app">
    <p>{{ message }}</p>
    <button @click="destroy">销毁</button>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '生命周期测试'
            };
        },
        methods: {
            destroy() {
                this.$destroy();
            }
        },
        beforeDestroy() {
            console.log('beforeDestroy');
        },
        destroyed() {
            console.log('destroyed');
        }
    });
    app.mount('#app');
</script>

生命周期钩子的应用

生命周期钩子可以用于许多场景，比如在 mounted 钩子中初始化 DOM 元素，或者在 beforeDestroy 时执行清理操作。

初始化DOM

在 mounted 钩子中，你可以访问并操作 DOM 元素。

<div id="app">
    <p>{{ message }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '生命周期测试'
            };
        },
        mounted() {
            console.log(this.$el.querySelector('p').textContent);
        }
    });
    app.mount('#app');
</script>

清理操作

在 beforeDestroy 钩子中，可以执行一些清理操作，比如移除定时器、清理事件监听器等。

<div id="app">
    <p>{{ message }}</p>
</div>
<script>
    let timer;
    const app = Vue.createApp({
        data() {
            return {
                message: '生命周期测试'
            };
        },
        beforeDestroy() {
            console.log('清理定时器');
            clearInterval(timer);
        },
        mounted() {
            timer = setInterval(() => {
                console.log(this.message);
            }, 1000);
        }
    });
    app.mount('#app');
</script>

常见的生命周期问题

在使用 Vue 的生命周期钩子时，可能会遇到一些常见问题，比如 beforeDestroy 和 destroyed 之间的区别，或是在 mounted 钩子中访问未挂载的 DOM 元素。

即时实例 vs 挂载后的实例

在 beforeCreate 和 created 钩子中，this 上的数据还不可用，因为此时还没有初始化。在 mounted 钩子中，DOM 已经挂载，可以访问 this.$el。

挂载顺序

多个组件并存时，挂载顺序可能会影响数据的获取和更新。确保在适当的时间访问和更新数据。

依赖注入

如果组件需要依赖外部环境的数据，应该在 mounted 钩子中注入这些依赖。

销毁后的行为

在 destroyed 钩子中，组件实例已被销毁，此时不要再尝试访问或修改实例的属性和方法。

实践项目：构建个人博客

项目需求分析

构建一个简单的个人博客系统，主要功能包括：

用户注册和登录
发布文章
查看文章列表
评论文章

项目初始化

首先，初始化一个 Vue 项目，并安装必要的依赖。

mkdir my-blog
cd my-blog
npm init -y
npm install vue@3.2.26 vuex@4.0.2 axios@0.27.2

创建 App.vue 文件作为主组件：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

创建 router/index.js 文件用于路由配置：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import Register from './views/Register.vue';
import Post from './views/Post.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/post/:id', component: Post }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

创建 store/index.js 文件用于状态管理：

import { createStore } from 'vuex';
import axios from 'axios';

const store = createStore({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setUser', response.data.user);
          return response.data.user;
        });
    },
    register({ commit }, user) {
      return axios.post('/api/register', user)
        .then(response => {
          commit('setUser', response.data.user);
          return response.data.user;
        });
    }
  }
});

export default store;

在 main.js 中配置 Vue 实例、路由和状态管理：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

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

功能实现步骤

接下来，逐步实现各个模块的功能。首先实现登录和注册功能。

用户登录

创建 Login.vue 文件：

<template>
  <div>
    <h1>登录</h1>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" placeholder="密码" type="password">
    <button @click="login">登录</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    ...mapActions(['login']),
    handleLogin() {
      this.login({ username: this.username, password: this.password });
    }
  }
};
</script>

用户注册

创建 Register.vue 文件：

<template>
  <div>
    <h1>注册</h1>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" placeholder="密码" type="password">
    <button @click="register">注册</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    ...mapActions(['register']),
    handleRegister() {
      this.register({ username: this.username, password: this.password });
    }
  }
};
</script>

发布文章

创建 Post.vue 文件：

<template>
  <div>
    <h1>发布文章</h1>
    <textarea v-model="content"></textarea>
    <button @click="submitPost">发布</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      content: ''
    };
  },
  methods: {
    ...mapActions(['submitPost']),
    handleSubmitPost() {
      this.submitPost({ content: this.content });
    }
  }
};
</script>

文章列表

创建 Home.vue 文件：

<template>
  <div>
    <h1>文章列表</h1>
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['posts'])
  },
  methods: {
    ...mapActions(['fetchPosts'])
  },
  mounted() {
    this.fetchPosts();
  }
};
</script>

项目部署与上线

当项目功能实现完成后，可以将项目部署到服务器上。推荐使用 npm run build 命令来打包项目，并使用服务器程序如 http-server 或 nginx 来托管静态文件。

打包项目

首先，安装 @vue/cli-service-global 来生成生产环境的构建文件。

npm install -g @vue/cli-service-global
vue-cli-service build

部署到服务器

将生成的 dist 文件夹中的内容上传到服务器上，配置服务器的静态文件托管。

scp -r dist/* user@your.server:/var/www/html/your-blog

配置 Nginx 或其他 Web 服务器，使其指向上传的文件夹。重启服务器，访问你的博客网站即可看到结果。

server {
    listen 80;
    server_name your.server;
    root /var/www/html/your-blog;
    index index.html;
}

总结，通过这个项目，我们学习了 Vue 的主要特性和功能，从组件化开发、状态管理到生命周期管理，再到实际的应用开发。希望这个教程对你有所帮助。

这篇关于Vue新手入门教程：从零开始学习Vue框架的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue新手入门教程：从零开始学习Vue框架

变量绑定

属性绑定

事件绑定

表单绑定

插值

事件处理

表单绑定

计算属性

方法

v-if 和 v-show

v-for

v-bind 和 v-model

v-on

创建组件

使用组件

属性和插槽

父组件向子组件传递数据

子组件向父组件传递数据

组件间的数据共享

Vuex简介

安装和配置Vuex

使用Vuex管理状态

实战案例：购物车管理

挂载钩子

更新钩子

销毁钩子

初始化DOM

清理操作

即时实例 vs 挂载后的实例

挂载顺序

依赖注入

销毁后的行为

用户登录

用户注册

发布文章

文章列表

打包项目

部署到服务器

相关编程文章