首页手记 Vue3入门：新手必读的简单教程

Vue3入门：新手必读的简单教程

标签：

Vue.js

概述

本文介绍了Vue3的核心特性、开发环境搭建、基本概念、路由管理、状态管理和组件通信等内容，帮助新手快速上手Vue3。文章详细讲解了如何安装和配置开发工具、创建Vue3项目以及使用Vue Router和Vuex进行状态管理。此外，还涵盖了Vue3项目部署的相关步骤，包括构建和打包项目以及部署到GitHub Pages和Netlify等服务。

Vue3简介与环境搭建

Vue3的核心特性介绍

Vue.js是一个用于构建用户界面的渐进式JavaScript框架。Vue3是Vue.js的最新版本，它在性能、API设计和工具支持方面都进行了改进。Vue3的核心特性包括：

更简洁的API设计：Vue3简化了API，使得开发者可以更快地上手和编写代码。
更好的TypeScript支持：Vue3与TypeScript的结合更加紧密，提供了更好的类型推断和类型支持。
更快的渲染：Vue3通过引入新的渲染机制，提升了渲染性能。
Composition API：这是一种新的API风格，允许开发者更加灵活地组织逻辑代码。
更好的Tree Shaking：Vue3的代码结构更加有利于Tree Shaking（即Tree Shaking是一种优化技术，可以去除未使用的代码，从而减小最终打包文件的大小）。
新的编译器：Vue3的编译器进行了重构，提供了更好的性能和错误处理。
更好的错误消息：Vue3提供了更详细的错误信息，有助于开发者更快地定位和解决问题。

以下是一个使用Composition API的示例：

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      doubleCount,
      increment
    };
  }
};

开发环境的搭建步骤

为了开始使用Vue3开发项目，你需要首先搭建开发环境。以下是搭建开发环境的步骤：

安装Node.js：Vue3需要Node.js环境来运行。确保你的计算机上安装了Node.js版本14.x或更高版本。你可以在Node.js官网下载最新的稳定版。
安装Vue CLI：Vue CLI是一个命令行工具，用于快速启动Vue项目。安装Vue CLI的命令如下：
```
npm install -g @vue/cli
```
创建Vue3项目：使用Vue CLI创建一个新的Vue3项目。运行以下命令：
```
vue create my-vue3-project
```
选择Vue3版本：在Vue CLI的选项中，选择Manually select features并选择Vue 3。
运行项目：进入项目目录并启动开发服务器：
```
cd my-vue3-project
npm run serve
```
开发服务器启动后，你可以在浏览器中访问http://localhost:8080来查看你的Vue3项目。

安装必要的开发工具

除了上述的开发环境搭建步骤外，你还可以根据需要安装一些开发工具来提升开发效率：

VS Code：推荐使用VS Code作为代码编辑器。它提供了丰富的插件生态系统，包括Vue插件，可以帮助你更高效地开发Vue项目。
Vue Devtools：Vue Devtools是一个浏览器扩展，可以帮助你查看和调试Vue应用的状态。它提供了组件树、响应式数据结构和Vue实例等信息。
ESLint：ESLint是一个代码质量工具，可以帮助你保持代码的一致性和可维护性。你可以通过以下命令安装ESLint：
```
npm install eslint --save-dev
```
Prettier：Prettier是一个代码格式化工具，可以自动格式化你的代码，使其符合统一的格式规范。你可以通过以下命令安装Prettier：
```
npm install prettier --save-dev
```

Vue3基本概念

组件与模板

在Vue3中，组件是构建Vue应用的基本单位。组件允许你将应用分割成独立的、可重用的代码块。每个组件通常包含一个HTML模板、一个JavaScript逻辑和一个可选的CSS样式。

以下是一个简单的Vue3组件示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue3',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在这个示例中，组件包含了一个模板、一个JavaScript逻辑和一个CSS样式。模板定义了组件的结构，JavaScript逻辑定义了组件的行为，CSS样式则定义了组件的样式。

数据绑定与响应式系统

Vue3通过数据绑定和响应式系统实现了数据驱动的UI。数据绑定允许你将DOM元素与Vue实例的数据属性进行绑定。当数据属性发生变化时，DOM元素会自动更新。

以下是一个数据绑定的示例：

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue3'
    };
  }
};
</script>

在这个示例中，{{ message }}是一个插值表达式，它可以将message数据属性的值插入到DOM元素中。v-model指令则实现了输入框与message数据属性的双向绑定。当输入框中的内容发生变化时，message数据属性也会自动更新。

计算属性与侦听器

计算属性是在模板中动态计算属性的值的便捷方式。计算属性会根据其依赖的数据属性自动更新。侦听器则是用于侦听特定数据属性的变化，并在变化时执行相应的回调函数。

以下是一个计算属性和侦听器的示例：

<template>
  <div>
    <p>{{ fullName }}</p>
    <p>{{ doubleCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      count: 10
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
    doubleCount() {
      return this.count * 2;
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    }
  }
};
</script>

在这个示例中，fullName是一个计算属性，它根据firstName和lastName数据属性的值动态计算出全名。doubleCount也是一个计算属性，它返回count数据属性的两倍值。watch对象用于侦听count数据属性的变化，并在变化时打印出变化前后的值。

Vue3路由管理

安装与配置Vue Router

Vue Router是一个基于Vue.js的应用的路由系统。它可以帮助你管理应用中的多个视图，并实现基于URL的导航。以下是如何安装和配置Vue Router的步骤：

安装Vue Router：
```
npm install vue-router@next --save
```
创建路由配置文件：
在项目中创建一个router/index.js文件，配置路由。
定义路由：
在路由配置文件中定义路由。每个路由通常包含一个路径和一个组件。
在主应用文件中引入并使用Vue Router：
在主应用文件（例如main.js）中引入并使用Vue Router。

以下是一个简单的Vue Router配置示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

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

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

export default router;

路由的基本使用

在定义好路由配置后，你可以在应用中使用路由进行导航。以下是如何在Vue组件中使用路由的示例：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import router from '../router'; // 引入路由配置
export default {
  name: 'App',
  router
};
</script>

在这个示例中，<router-link>元素用于创建导航链接，<router-view>元素用于渲染对应的组件。当用户点击导航链接时，路由会根据路径进行导航，并在<router-view>中渲染对应的组件。

动态路由与参数传递

Vue Router支持动态路由和参数传递。动态路由允许你定义可变的路径，参数传递则允许你在路径中传递参数。

以下是一个动态路由和参数传递的示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Post from '../views/Post.vue';

const routes = [
  {
    path: '/post/:id',
    name: 'Post',
    component: Post
  }
];

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

export default router;

<template>
  <div>
    <router-link v-for="id in postIds" :key="id" :to="`/post/${id}`">
      Post {{ id }}
    </router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postIds: [1, 2, 3, 4]
    };
  }
};
</script>

<template>
  <div>
    <h1>Post {{ id }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id
    };
  }
};
</script>

在这个示例中，动态路由路径为/post/:id，Post组件会根据路径中的id参数渲染不同的内容。<router-link>元素中的:to属性用于动态生成路径。

Vue3状态管理

Vuex入门介绍

Vuex是一个用于管理Vue应用状态的库。它提供了一个集中式的状态管理解决方案，使得你的应用状态更加容易管理和维护。以下是如何使用Vuex的基本步骤：

安装Vuex：
```
npm install vuex@next --save
```
创建Store：
在项目中创建一个store目录，并在其中创建一个index.js文件。在该文件中定义Store。
在主应用文件中引入并使用Store：
在主应用文件（例如main.js）中引入并使用Store。

以下是一个简单的Vuex配置示例：

// store/index.js
import { createStore } from 'vuex';

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

创建Store与状态管理

在定义好Store后，你可以在应用中使用它来管理状态。以下是如何在Vue组件中使用Store的示例：

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment', 'decrement'])
  }
};
</script>

在这个示例中，mapState和mapGetters函数用于将Store中的状态和计算属性映射到组件的computed属性中。mapActions函数用于将Store中的动作映射到组件的methods方法中。

使用Mutation与Action

在Vuex中，mutation是一个标准化的方法，用于更改Store的状态。action则是一个异步方法，可以在其中调用mutation来更新状态。

以下是一个使用Mutation和Action的示例：

// store/index.js
import { createStore } from 'vuex';

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

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment', 'decrement'])
  }
};
</script>

在这个示例中，increment和decrement是Store中的动作，它们异步调用increment和decrement的Mutation来更新状态。

Vue3组件通信

父子组件通信

在Vue中，父子组件可以通过Props和事件来实现通信。Props允许父组件向子组件传递数据，事件则允许子组件向父组件传递数据。

以下是一个父子组件通信的示例：

<!-- Parent.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <Child :message="message" @increment="increment" />
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello from Parent'
    };
  },
  methods: {
    increment() {
      this.message += '!';
    }
  }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    increment() {
      this.$emit('increment');
    }
  }
};
</script>

在这个示例中，父组件通过props向子组件传递message数据，子组件通过$emit触发increment事件，父组件监听该事件并更新message数据。

兄弟组件通信

在Vue中，兄弟组件可以通过一个共享的Store或一个公共的事件总线来实现通信。以下是如何使用事件总线实现兄弟组件通信的示例：

<!-- EventBus.js -->
import Vue from 'vue';
import bus from './Bus';

export default new Vue({
  methods: {
    emitEvent(name, payload) {
      bus.$emit(name, payload);
    },
    listenEvent(name, callback) {
      bus.$on(name, callback);
    }
  }
});

<!-- SiblingA.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.emitEvent('message', 'Hello from SiblingA');
    }
  }
};
</script>

<!-- SiblingB.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    EventBus.listenEvent('message', (message) => {
      this.message = message;
    });
  }
};
</script>

在这个示例中，通过事件总线EventBus，组件A发送一个自定义事件，组件B监听该事件并更新自己的状态。

高阶组件与插槽

高阶组件是一种设计模式，允许你使用函数式编程的技巧，将组件功能进行组合，开发出更灵活和可复用的组件。插槽则允许你自定义插入的内容，使得组件更加灵活。

以下是一个高阶组件和插槽的示例：

<!-- Wrapper.vue -->
<template>
  <div>
    <slot :data="data"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        message: 'Hello from Wrapper'
      }
    };
  }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>{{ data.message }}</p>
  </div>
</template>

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

<!-- Parent.vue -->
<template>
  <div>
    <Wrapper>
      <Child :data="slotData" />
    </Wrapper>
  </div>
</template>

<script>
import Wrapper from './Wrapper.vue';
import Child from './Child.vue';

export default {
  components: {
    Wrapper,
    Child
  },
  data() {
    return {
      slotData: {
        message: 'Hello from Parent'
      }
    };
  }
};
</script>

在这个示例中，Wrapper组件定义了一个插槽，并通过slot元素传递数据给子组件。Parent组件使用Wrapper组件，并传递自己的自定义内容（Child组件）作为插槽内容。

Vue3项目部署

项目构建与打包

在开发完成后，你需要将Vue项目进行构建和打包，以便部署到生产环境。以下是如何构建和打包Vue项目的步骤：

安装构建工具：
Vue CLI已经集成了构建工具，因此你不需要单独安装。运行以下命令可以构建项目：
```
npm run build
```
生成构建文件：
构建完成后，会在项目根目录生成一个dist文件夹，其中包含了构建后的静态文件。

部署到GitHub Pages

GitHub Pages是一个托管静态网站的免费服务。你可以将Vue项目部署到GitHub Pages，以便在线访问你的应用。以下是部署到GitHub Pages的步骤：

创建GitHub仓库：
在GitHub上创建一个新的仓库，并将你的项目推送到该仓库。
配置GitHub Pages设置：
在仓库的Settings页面中，找到GitHub Pages设置，并选择/docs分支作为源。
推送到GitHub Pages：
运行以下命令，将构建后的静态文件推送到GitHub Pages：
```
npm run deploy
```

部署到其他静态服务器

除了GitHub Pages，你还可以将Vue项目部署到其他静态服务器，例如Netlify或Vercel。以下是部署到Netlify的步骤：

创建Netlify账户：
在Netlify上创建一个账户，并登录。
链接GitHub仓库：
在Netlify上链接你的GitHub仓库，并选择构建并部署的设置。
配置构建设置：
在Netlify的构建设置中，选择npm run build作为构建命令，并选择dist文件夹作为构建输出。
部署应用：
点击部署按钮，Netlify会自动构建并部署你的应用。

通过以上步骤，你可以将你的Vue项目成功部署到各种静态服务器上，以便在线访问你的应用。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

RISEBY

手记
篇

粉丝

70

获赞与收藏

317

关注作者，订阅最新文章

相关文章推荐

新手必读：javascript入门书籍推荐

【笔记】MindManager 2018新手入门教程

松哥手把手教你在 Vue3 中自定义插件

【MobX】MobX 简单入门教程

vue3 深入浅出（连载三）手摸手实现 vue3

阅读免费教程

后端通用面试教程

41个小节 30292 342

网络编程入门教程

20个小节 12502 235

Pandas 入门教程

25个小节 18390 332

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空