一、介绍

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 名和命名。

(adsbygoogle = window.adsbygoogle || []).push({});