首页手记 Vue3入门指南：从零开始构建第一个Vue3应用

Vue3入门指南：从零开始构建第一个Vue3应用

标签：

Vue.js

概述

Vue3作为Vue.js的最新版本，带来了Composition API、Teleport、Fragments等新特性，显著提升了开发效率和性能。本文将详细介绍Vue3的新特性和改进，包括安装、项目搭建、基础语法以及组件化开发等方面的内容。此外，还将介绍Vue Router和Vuex的状态管理，并通过构建个人博客页面实战演练这些知识点。

Vue3简介

Vue3的特点

Vue.js 是一个前端开发框架，旨在构建用户界面，尤其是单页应用。Vue.js 以其简单易用、渐进式特性而受到广大开发者喜爱。Vue3作为最新版本，引入了许多新特性，旨在提高开发效率并优化性能。

Composition API：Vue3引入了Composition API，允许开发者使用一种更灵活的方式来组织和重用逻辑。
Teleport：此特性允许开发者将子组件渲染到DOM中的任何位置，不局限于父组件的挂载节点。
Fragments：Vue3支持在同一个父元素下，返回多个独立的元素，解决了Vue2中无法返回多个根元素的问题。
更好的TypeScript支持：Vue3对TypeScript的支持更完善，能够帮助开发者在项目中更好地利用TypeScript的静态类型检查。
更快的渲染性能：Vue3通过一系列优化提升了渲染性能，例如静态树提升和依赖收集优化等。
更小的打包体积：Vue3对默认导出进行了更改，使用了新的导出方式，使得最终打包后的体积更小。

Vue3与Vue2的主要区别

Vue3在很多方面都进行了优化和改进，与Vue2相比，主要区别在于以下几点：

组件选项API vs Composition API：Vue2依赖选项API，组件中的逻辑被分散在不同的选项中，如data, computed, methods等。而Vue3引入了Composition API，将逻辑组织成一个函数，提高了逻辑复用性。
TypeScript支持：Vue3增强了与TypeScript的兼容性，支持默认导出，这使得在TypeScript项目中使用Vue3更加方便。
渲染性能的改进：Vue3通过静态树提升和依赖收集优化等技术，使渲染性能得到了显著提升。
模板语法变化：Vue3中引入了一些新的模板语法，如使用<script setup>来替代传统的<script>标签。
新特性的引入：Vue3引入了Teleport、Fragments和更好的TypeScript支持等特性，使得开发者在开发过程中有更多的选择和灵活性。

安装Vue3

安装Vue3有几种方法，这里主要介绍使用npm和yarn两种方式。

使用npm安装

首先确保npm已安装，然后使用以下命令来安装Vue CLI：
```
npm install -g @vue/cli
```
安装完成后，使用Vue CLI创建Vue3项目：
```
vue create my-vue3-app
```
在创建项目时，确保选择Vue版本为3.x。
使用yarn安装

如果你更倾向于使用yarn，可以运行以下命令来安装Vue CLI：
```
yarn global add @vue/cli
```
然后使用Vue CLI创建Vue3项目：
```
vue create my-vue3-app
```
选择Vue版本为3.x进行创建。

Vue3项目搭建

使用Vue CLI创建Vue3项目

使用Vue CLI创建一个新项目是最快捷的方式。以下是创建步骤：

确保已安装Vue CLI，如未安装，请参考上一节。
打开命令行工具，运行以下命令创建一个新项目：
```
vue create my-vue3-app
```
按提示选择Vue版本为3.x，然后等待安装完成。
进入项目目录：
```
cd my-vue3-app
```

项目文件结构解析

Vue CLI创建的项目具有典型的现代前端项目结构，主要文件和目录包括：

src：源代码目录，包含Vue组件和逻辑。
public：包含静态文件，如index.html。
node_modules：存放项目依赖的模块。
package.json：包含项目依赖和脚本信息。
babel.config.js：配置Babel，用于编译Vue3中的JS代码。
vue.config.js：配置Vue CLI，如端口、代理等。

src目录下的主要文件包括：

main.js：项目入口文件。
App.vue：应用程序的根组件。
assets：存放静态资源。
components：存放自定义组件。
router：存放路由配置。
store：存放状态管理相关文件。

配置开发环境

Vue CLI会自动配置开发环境，包括热重载、代码分割等功能。要启动开发服务器，可运行以下命令：

npm run serve

或者，如果你使用Yarn：

yarn serve

这将启动开发服务器，并在浏览器中自动打开默认端口（通常是http://localhost:8080）。

Vue3基础语法

数据绑定

在Vue中，数据绑定是实现视图更新的核心功能。数据绑定可以在HTML模板中使用v-bind（:简写）来绑定一个元素的属性到Vue实例的数据对象上。

例如，考虑下面的代码：

<div id="app">
  <p>{{ message }}</p>
</div>

在Vue实例中，我们可以设置一个名为message的数据属性，如下所示：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

当message的值改变时，DOM中的<p>元素也会相应更新。

模板语法

Vue的模板语法是基于HTML的，并提供了一些特有语法，如{{ }}用于数据绑定，v-if、v-for用于条件和循环。

例如，使用v-if控制元素的显示：

<div id="app">
  <p v-if="ok">This is a conditionally rendered paragraph.</p>
</div>

对应的Vue实例设置如下：

new Vue({
  el: '#app',
  data: {
    ok: true
  }
});

当ok为true时，段落会显示。

计算属性与方法

计算属性是基于数据的计算过程，其特点是依赖的数据发生变化时，计算属性会自动重新计算。计算属性定义在Vue实例的computed对象中。

例如，计算一个用户的名字：

<div id="app">
  <p>Full name: {{ fullName }}</p>
</div>

计算属性的定义：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

方法则是定义在Vue实例的methods对象中。方法可以访问Vue实例的数据和计算属性。

例如，定义一个方法来格式化日期：

<div id="app">
  <p>{{ formatTime() }}</p>
</div>

方法定义：

new Vue({
  el: '#app',
  data: {
    time: new Date().toLocaleTimeString()
  },
  methods: {
    formatTime: function () {
      return this.time;
    }
  }
});

指令和事件处理

指令是Vue中用于操作DOM的特殊属性，其名称以v-开头。例如，v-for用于列表渲染，v-on用于事件监听等。

以下是一个列表渲染的例子，使用v-for遍历数组：

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

定义Vue实例：

new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana', 'Cherry']
  }
});

事件处理使用v-on（别名@）来绑定事件处理器。例如，一个简单的点击事件：

<div id="app">
  <button @click="increment">Increment</button>
  <p>Count: {{ count }}</p>
</div>

定义Vue实例：

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function () {
      this.count++;
    }
  }
});

Vue3组件化开发

创建组件

Vue组件是可复用的Vue实例。每个组件都包含自己的数据、方法和模板。组件的定义可以放在components对象中。

例如，创建一个简单的HelloWorld组件：

Vue.component('HelloWorld', {
  template: '<div>Hi, {{ name }}!</div>',
  props: ['name']
});

在模板中使用组件：

<div id="app">
  <HelloWorld name="John" />
</div>

定义Vue实例：

new Vue({
  el: '#app'
});

组件的属性和事件

组件可以接收来自父组件的数据，并通过props属性来声明。同时，组件可以触发自定义事件，传递数据给父组件。

例如，父组件传递数据给子组件：

<div id="app">
  <ChildComponent :name="parentName" />
</div>

子组件定义：

Vue.component('ChildComponent', {
  props: ['name'],
  template: '<div>Child component says: {{ name }}</div>'
});

父组件：

new Vue({
  el: '#app',
  data: {
    parentName: 'Parent'
  }
});

插槽的使用

插槽允许组件定义一个或多个占位符，父组件可以将任何内容传递给这个位置。

例如，使用一个默认插槽：

<div id="app">
  <ChildComponent>
    <p>This is default slot content</p>
  </ChildComponent>
</div>

子组件定义：

Vue.component('ChildComponent', {
  template: '<div><slot></slot></div>'
});

父子组件通信

父组件可以通过props向子组件传递数据，而子组件则通过自定义事件向父组件传递数据。

例如，父组件向子组件传递数据，子组件触发事件：

<div id="app">
  <ParentComponent @childEvent="handleChildEvent" />
</div>

子组件定义：

Vue.component('ParentComponent', {
  template: '<ChildComponent name="Parent" @my-event="childEvent" />',
  methods: {
    childEvent: function (event) {
      this.$emit('childEvent', event);
    }
  }
});

Vue.component('ChildComponent', {
  props: ['name'],
  template: '<button @click="sendEvent">Click me</button>',
  methods: {
    sendEvent: function () {
      this.$emit('my-event', 'Data from child');
    }
  }
});

父组件：

new Vue({
  el: '#app',
  methods: {
    handleChildEvent: function (data) {
      console.log('Received data from child:', data);
    }
  }
});

Vue3路由与状态管理

Vue Router基础

Vue Router是Vue项目中最常用的路由库，用于实现前端路由功能。它支持嵌套路由，路由守卫等功能。

安装和配置Vue Router

首先，安装Vue Router：

npm install vue-router@next

或者使用yarn：

yarn add vue-router@next

然后创建路由配置：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

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

export default router;

在Vue实例中使用：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

状态管理Vuex介绍

Vuex是一个状态管理模式，主要用于大型应用中保持状态的一致性和可复用性。它提供了一个仓库（store）来集中管理应用的状态。

安装和配置Vuex

安装Vuex：

npm install vuex@next

或者使用yarn：

yarn add vuex@next

创建Vuex store：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAction({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

在Vue实例中使用：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

实战演练：构建个人博客页面

项目需求分析

构建一个简单的个人博客页面，主要包括以下功能：

主页：展示博客文章列表。
文章详情页：展示文章的具体内容。
文章分类：可以按分类筛选博客文章。
用户交互：支持点赞和评论功能。

设计项目结构

根据需求分析，设计项目结构如下：

src/
├── components/
│   ├── ArticleItem.vue
│   ├── ArticleDetail.vue
│   └── CommentItem.vue
├── views/
│   ├── Home.vue
│   ├── Article.vue
│   └── Category.vue
├── router/
│   └── index.js
├── store/
│   └── index.js
├── App.vue
└── main.js

编写组件代码

ArticleItem组件

<template>
  <div class="article-item">
    <h2>{{ title }}</h2>
    <p>{{ excerpt }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'excerpt']
};
</script>

<style scoped>
.article-item {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}
</style>

ArticleDetail组件

<template>
  <div class="article-detail">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <div>
      <button @click="incrementLike">Like</button>
      <span>{{ likes }} likes</span>
    </div>
    <CommentList :comments="comments" />
  </div>
</template>

<script>
import CommentList from './CommentList.vue';

export default {
  props: ['title', 'content', 'comments'],
  data() {
    return {
      likes: 0
    };
  },
  methods: {
    incrementLike() {
      this.likes++;
    }
  },
  components: {
    CommentList
  }
};
</script>

<style scoped>
.article-detail {
  padding: 20px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}
</style>

CommentItem组件

<template>
  <div class="comment-item">
    <p>{{ comment.content }}</p>
  </div>
</template>

<script>
export default {
  props: ['comment']
};
</script>

<style scoped>
.comment-item {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}
</style>

集成路由和状态管理

路由配置

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Article from '../views/Article.vue';
import Category from '../views/Category.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/article/:id', component: Article },
  { path: '/category/:name', component: Category }
];

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

export default router;

Vuex store配置

import { createStore } from 'vuex';

export default createStore({
  state: {
    articles: [
      { id: 1, title: 'Vue初识', content: 'Vue是一个前端框架', likes: 0, comments: [] },
      { id: 2, title: 'React初识', content: 'React也是前端框架', likes: 0, comments: [] }
    ]
  },
  mutations: {
    addArticle(state, article) {
      state.articles.push(article);
    },
    addComment(state, comment) {
      const article = state.articles.find(a => a.id === comment.articleId);
      if (article) {
        article.comments.push(comment);
      }
    }
  },
  actions: {
    addArticle({ commit }, article) {
      commit('addArticle', article);
    },
    addComment({ commit }, comment) {
      commit('addComment', comment);
    }
  },
  getters: {
    getArticleById: state => id => {
      return state.articles.find(a => a.id === id);
    }
  }
});

最终测试和部署

完成组件编写和路由、状态管理配置后，启动开发服务器：

npm run serve

在浏览器中访问http://localhost:8080，确保所有页面和功能都正常运行。

当开发完成后，可以使用npm run build进行构建，并将生成的dist目录部署到服务器上。

通过以上步骤，你可以构建一个简单的个人博客页面，实现基本的博客管理功能。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

喵喔喔

手记
篇

粉丝

103

获赞与收藏

606

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30936 346

网络编程入门教程

20个小节 12729 240

Pandas 入门教程

25个小节 18626 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3入门指南：从零开始构建第一个Vue3应用

Vue3的特点

Vue3与Vue2的主要区别

安装Vue3

使用Vue CLI创建Vue3项目

项目文件结构解析

配置开发环境

数据绑定

模板语法

计算属性与方法

指令和事件处理

创建组件

组件的属性和事件

插槽的使用

父子组件通信

Vue Router基础

安装和配置Vue Router

状态管理Vuex介绍

安装和配置Vuex

项目需求分析

设计项目结构

编写组件代码

ArticleItem组件

ArticleDetail组件

CommentItem组件

集成路由和状态管理

路由配置

Vuex store配置

最终测试和部署

阅读免费教程