Vue3公共组件项目实战教程

本文介绍了如何使用Vue3创建公共组件项目，涵盖了从环境搭建到组件通信的全过程，提供了详细的实战案例，并探讨了项目优化与维护的方法，旨在帮助开发者掌握vue3公共组件项目实战的最佳实践。本文通过一个简单的在线购物车应用案例，逐步展示了Vue3的基础入门、公共组件的创建与使用、组件通信、项目实战案例、项目优化与维护等重要方面。

Vue3基础入门 Vue3简介

Vue.js 是一个轻量级的前端框架，它允许开发者通过声明式语法来构建用户界面。Vue3 是 Vue.js 的最新版本，于2020年9月17日正式发布。Vue3带来了许多新特性，包括但不限于：

• 更快的渲染速度和更小的体积
• 更强的类型支持
• 更好的 API 设计
• 更丰富的 Composition API
• 更好地与现代 JavaScript 生态系统集成

Vue3环境搭建

安装Vue CLI

为了简化项目创建和开发流程，Vue CLI 是一个非常有用的工具。首先，你需要安装 Node.js（版本8.9.4或更高版本）。然后通过 npm 或者 yarn 来安装 Vue CLI。

npm install -g @vue/cli
# 或者使用 yarn
yarn global add @vue/cli

创建Vue项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue create my-vue3-project
# 选择 Vue 3 预设
cd my-vue3-project
npm install
npm run serve

项目结构

默认情况下，Vue CLI 会生成一个包含以下文件的项目结构：

my-vue3-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

Vue3基本语法

声明式渲染

Vue 通过模板语法来描述 HTML 中的数据绑定。在 HTML 中使用 v-bind 指令来绑定数据，v-on 用于绑定事件处理器。

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="changeMessage">Change Message</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed!';
    }
  }
});

计算属性

计算属性是基于它们的依赖关系缓存的，只有在依赖发生改变时，才会重新计算。

<div id="app">
  <p>Computed value: {{ reversedMessage }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
});

模板编译

Vue 使用虚拟 DOM 实现高性能渲染，将模板转换为渲染函数并进行编译。编译后的代码可以直接在浏览器中运行，无需额外的构建步骤。

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

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

创建公共组件 什么是公共组件

公共组件是指可以在不同页面或模块中复用的组件。这些组件通常封装了特定的功能，如按钮、表单元素、导航栏等。复用公共组件可以提高代码的重用性，减少代码冗余。

如何创建可复用的组件

创建公共组件的关键在于定义组件的属性和方法，使其能够被其他组件或页面灵活地调用。

定义组件

使用 Vue.component 方法来注册全局组件，或者在 components 对象中注册局部组件。

Vue.component('my-component', {
  template: '<div>A Custom Component</div>'
});

// 局部组件
var example = new Vue({
  el: '#example',
  components: {
    'my-component': {
      template: '<div>A Custom Component</div>'
    }
  }
});

组件属性与事件

属性绑定

组件可以接受外部传入的属性，这些属性在组件内部可以作为 props 使用。

<my-component message="Hello from parent"></my-component>

Vue.component('my-component', {
  props: ['message'],
  template: '<p>{{ message }}</p>'
});

事件监听

组件可以通过 $emit 方法触发自定义事件，并在父组件中监听这些事件。

<my-component v-on:child-event="handleChildEvent"></my-component>

Vue.component('my-component', {
  template: '<button v-on:click="$emit(\'child-event\')">Click me</button>'
});

new Vue({
  el: '#app',
  methods: {
    handleChildEvent() {
      console.log('Child event triggered');
    }
  }
});

组件通信 父子组件通信

父组件向子组件传值

父组件通过 props 向子组件传递数据。

<div id="app">
  <parent-component :value="parentValue"></parent-component>
</div>

Vue.component('parent-component', {
  props: ['value'],
  template: '<p>{{ value }}</p>'
});

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

子组件向父组件传值

子组件通过 $emit 触发自定义事件，父组件通过监听该事件来获取子组件的数据。

<div id="app">
  <parent-component @child-event="handleChildEvent"></parent-component>
</div>

Vue.component('parent-component', {
  methods: {
    emitChildEvent() {
      this.$emit('child-event', 'Child Value');
    }
  },
  template: '<button @click="emitChildEvent">Click me</button>'
});

new Vue({
  el: '#app',
  methods: {
    handleChildEvent(value) {
      console.log(value);
    }
  }
});

兄弟组件通信

兄弟组件之间没有直接的父子关系，可以通过父组件作为中介来传递数据。

<div id="app">
  <parent-component>
    <child-a @child-a-event="handleChildAEvent"></child-a>
    <child-b @child-b-event="handleChildBEvent"></child-b>
  </parent-component>
</div>

Vue.component('child-a', {
  methods: {
    emitChildAEvent() {
      this.$emit('child-a-event', 'Child A Value');
    }
  },
  template: '<button @click="emitChildAEvent">Child A</button>'
});

Vue.component('child-b', {
  template: '<p>Child B</p>'
});

Vue.component('parent-component', {
  template: '<div><slot></slot></div>',
  methods: {
    handleChildAEvent(value) {
      console.log('Child A Value: ' + value);
    },
    handleChildBEvent(value) {
      console.log('Child B Value: ' + value);
    }
  }
});

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

自定义事件和插槽

自定义事件

自定义事件允许组件之间进行更灵活的数据交换。

<div id="app">
  <parent-component @child-event="handleChildEvent"></parent-component>
</div>

Vue.component('parent-component', {
  methods: {
    emitChildEvent() {
      this.$emit('child-event', 'Custom Event Value');
    }
  },
  template: '<button @click="emitChildEvent">Click me</button>'
});

new Vue({
  el: '#app',
  methods: {
    handleChildEvent(value) {
      console.log('Custom Event Value: ' + value);
    }
  }
});

插槽

插槽允许在组件中定义占位符，以便在其父组件中插入内容。

<div id="app">
  <parent-component>
    <template slot="header">
      <h1>Header</h1>
    </template>
    <p>Content</p>
    <template slot="footer">
      <p>Footer</p>
    </template>
  </parent-component>
</div>

Vue.component('parent-component', {
  template: `
    <div>
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  `
});

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

项目实战案例 项目需求分析

假设我们需要开发一个简单的在线购物车应用。该应用需要实现以下功能：

• 显示商品列表
• 商品详情展示
• 添加商品到购物车
• 查看购物车中的商品
• 删除购物车中的商品

设计组件结构

根据需求，我们可以将应用分为以下几个主要组件：

• ProductList：展示商品列表
• ProductItem：展示商品详情
• Cart：显示购物车中的商品
• CartItem：展示购物车中的单个商品
• App：主应用组件，包含以上组件

实现组件功能

ProductList 组件

<template>
  <div>
    <h1>Product List</h1>
    <ul>
      <product-item v-for="product in products" :key="product.id" :product="product"></product-item>
    </ul>
  </div>
</template>

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

export default {
  components: {
    ProductItem
  },
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1', price: 10 },
        { id: 2, name: 'Product 2', price: 20 },
        { id: 3, name: 'Product 3', price: 30 }
      ]
    };
  }
};
</script>

ProductItem 组件

<template>
  <li>
    <h2>{{ product.name }}</h2>
    <p>Price: {{ product.price }}</p>
    <button @click="$emit('add-to-cart', product)">Add to Cart</button>
  </li>
</template>

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

Cart 组件

<template>
  <div>
    <h1>Cart</h1>
    <ul>
      <cart-item v-for="item in cartItems" :key="item.id" :item="item"></cart-item>
    </ul>
  </div>
</template>

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

export default {
  components: {
    CartItem
  },
  data() {
    return {
      cartItems: []
    };
  },
  methods: {
    addToCart(product) {
      this.cartItems.push(product);
    },
    removeFromCart(item) {
      this.cartItems = this.cartItems.filter(i => i.id !== item.id);
    }
  }
};
</script>

CartItem 组件

<template>
  <li>
    <h2>{{ item.name }}</h2>
    <p>Price: {{ item.price }}</p>
    <button @click="$emit('remove-from-cart', item)">Remove</button>
  </li>
</template>

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

App 组件

<template>
  <div id="app">
    <product-list @add-to-cart="addToCart"></product-list>
    <cart @remove-from-cart="removeFromCart"></cart>
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';
import Cart from './components/Cart.vue';

export default {
  components: {
    ProductList,
    Cart
  },
  methods: {
    addToCart(product) {
      this.$store.commit('addToCart', product);
    },
    removeFromCart(item) {
      this.$store.commit('removeFromCart', item);
    }
  }
};
</script>

项目优化与维护 代码规范

遵循代码规范是确保代码质量的重要一步。Vue.js 社区推荐使用 ESLint 作为代码检查工具。通过设置规则，可以确保代码一致性，减少因编码风格差异带来的问题。

安装 ESLint

npm install eslint --save-dev
npm install eslint-plugin-vue --save-dev

配置 ESLint

在项目根目录下创建 .eslintrc.js 文件来配置规则：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
};

单元测试

单元测试可以确保代码在变更时仍然保持正确。Vue.js 使用 Jest 作为测试框架，它也是 Vue Test Utils 的推荐选择。

安装 Jest 和 Vue Test Utils

npm install --save-dev jest @vue/test-utils

编写测试用例

import { shallowMount } from '@vue/test-utils';
import ProductList from '@/components/ProductList.vue';

describe('ProductList.vue', () => {
  it('renders product items', () => {
    const wrapper = shallowMount(ProductList);
    expect(wrapper.findAll('product-item').length).toBe(3);
  });
});

性能优化

Vue Devtools

Vue Devtools 是一个强大的调试工具，可以帮助开发者更好地理解 Vue 应用的内部结构和状态变化。

路由懒加载

通过按需加载路由组件，可以减少初始加载时间，提升应用性能。

const ProductList = () => import(/* webpackChunkName: "product-list" */ '@/components/ProductList.vue');

缓存计算属性

对于频繁变化的数据，可以使用 computed 属性来缓存计算结果，减少不必要的计算。

computed: {
  formattedDate() {
    return this.date.toLocaleDateString();
  }
}

使用 Vue 3 Composition API

Vue 3 引入了 Composition API，它提供了一种更灵活的方式来组织你的代码，使得代码更加模块化，易于维护。

import { ref, computed } from 'vue';

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

    return {
      count,
      doubleCount
    };
  }
};

总结与进阶方向 项目总结

本教程涵盖了 Vue3 的基础入门、公共组件创建和使用、组件通信、项目实战案例、项目优化与维护等重要方面。通过这些内容的学习，你可以构建出一个较为完整的 Vue 项目。

进一步学习的方向

• 深入学习 Vue 3 的 Composition API，了解其背后的设计理念和最佳实践。
• 掌握 Vue Router 和 Vuex，构建更复杂的应用。
• 学习 Vue CLI 的更多高级用法，如自定义插件、命令等。
• 研究 Vue 的生态系统，了解 VuePress、Vue CLI 插件等周边工具。

社区资源和工具推荐

• Vue.js 官网
• Vue.js 中文社区
• Vue CLI
• Vue Test Utils
• Vue Devtools
• 慕课网 提供丰富的 Vue.js 课程资源