Vue Modules 讲解 —— 构建可复用的 Vue.js 组件

一、介绍

Vue.js 在前端框架中越来越受欢迎，而 Vue Modules 是一种建立在 Vue.js 上的组件化开发方式，可以提供开发者一种可复用的组件，而不必担心组件与项目的耦合度以及作为单个文件传输的大小。

Vue Modules 针对的是单个组件的开发，大大降低了代码复杂度和维护成本。为什么要使用 Vue Modules 呢？首先，Vue Modules 具有更好的复用性，可以在多个项目中反复使用；其次，使用 Vue Modules 也可以提高开发效率，开发者可以更专注于组件的层次关系、API 等细节，并将组件分解成更小的块。

二、组件的目录结构

在使用 Vue Modules 开发组件前，需要先搭建一个合理的目录结构，此目录结构非常重要，也是后续组件开发的基础。下面是一个典型的 Vue 组件目录结构：

my-component/
├── docs/
│   └── README.md
├── examples/
│   ├── basic.html
│   └── complex.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── my-component.vue
│   ├── index.js
│   └── style.less
├── test/
│   └── specs/
├── package.json
└── webpack.config.js

需要注意的是，在组件开发中，所有与该组件相关的资源都应该保存在组件目录中，以便下次在引入组件时能够正确地访问它们。

三、使用 Vue CLI 构建组件

Vue CLI 是一个基于 Vue.js 的完整系统，开发者可以使用它来快速搭建 Vue.js 应用程序。下面演示如何使用 Vue CLI 构建 Vue Modules 组件:

1、使用 Vue CLI 创建项目

$ vue create my-component

2、安装依赖

$ cd my-component
$ npm i

3、创建 Vue 组件

在 src/components 目录下创建 vue 文件，内容如下：

<template>
  <div>My Component</div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

4、编写组件测试用例

在 tests/unit 目录下创建 my-component.spec.js 文件，内容如下：

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

describe('MyComponent', () => {
  it('renders', () => {
    const wrapper = shallowMount(MyComponent)
    expect(wrapper.exists()).toBe(true)
  })
})

5、运行测试

$ npm run test:unit

四、组件的导出与使用

1、导出组件

在 src/index.js 中，将组件导出：

import MyComponent from './components/MyComponent.vue'

export default MyComponent

2、安装依赖

使用 npm 发布组件之前，需要安装相应的依赖包，可使用以下命令：

$ npm i --save vue
$ npm i --save-dev rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-terser rollup-plugin-vue vue-template-compiler babel-core babel-plugin-external-helpers babel-preset-env

3、构建与发布

在 package.json 中加入以下内容：

"main": "dist/vue-module.min.js",
"module": "dist/vue-module.esm.js",
"files": [
  "dist/**/*",
  "src/**/*",
  "LICENSE",
  "README.md"
],
"scripts": {
  "build": "rollup -c",
  "prepublishOnly": "npm run build"
},

构建并发布组件：

$ npm publish

4、引入组件

在使用组件的项目中，可以使用以下命令安装：

$ npm i my-component --save

在 Vue 项目中，引入组件：

import MyComponent from 'my-component'
Vue.component('my-component', MyComponent)

五、组件的使用约定

在使用 Vue Modules 开发组件时，需要遵循以下约定：

1、组件名：组件名应该采用 PascalCase，如 MyComponent。

2、Prop 名：Prop 名应该采用 kebab-case，如 my-prop。

3、模板中的 Prop：在模板中，Prop 名应该采用 camelCase，如 myProp。

4、组件（文件）的命名：组件（文件）的命名应该采用 kebab-case，如 my-component.vue。

六、总结

Vue Modules 带来了很多优点，如高复用性和减少代码复杂度等。在使用 Vue Modules 开发组件时，需要关注组件的目录结构、使用 Vue CLI 构建组件以及组件导出与使用。还需要遵循一定的约定，如统一组件名、Prop 名和命名。