返回

vue-cli3下创建libs库，共享组件开发过程更规范！

前端

创建Vue.config.js配置文件

在根目录下创建vue.config.js配置文件（vue-cli3的配置文件，在这里的配置会覆盖脚手架webpack默认的配置项）。

创建packages目录

进入packages目录创立libs文件夹，用于存放共享组件。

新建组件库项目

在libs文件夹下运行vue-cli创建新的Vue项目：

vue create <your-component-lib-name>

修改组件库项目的package.json文件

在创建的组件库项目package.json文件中，将name字段修改为组件库的名称，并添加以下配置：

{
  "name": "<your-component-lib-name>",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "vue-cli-service build --target lib --name <your-component-lib-name> --dest ../dist"
  },
  "dependencies": {
    "vue": "^2.6.11"
  }
}

编写组件

在组件库项目中编写所需的组件。

构建组件库

在组件库项目中运行以下命令构建组件库：

npm run build

在主项目中使用组件库

在主项目中，将组件库项目添加到package.json文件的dependencies字段中：

{
  "dependencies": {
    "<your-component-lib-name>": "^1.0.0"
  }
}

然后，在主项目中运行以下命令安装组件库：

npm install

在主项目中使用组件

在主项目中，可以通过以下方式使用组件库中的组件：

import { MyComponent } from '<your-component-lib-name>';

export default {
  components: {
    MyComponent
  }
};

规范开发流程

为了确保组件库的开发过程更加规范，可以遵循以下流程：

  1. 在组件库项目中，使用统一的代码风格和规范。
  2. 在组件库项目中，使用单元测试来确保组件的正确性。
  3. 在组件库项目中，使用文档工具来生成组件的文档。
  4. 在组件库项目中，使用版本控制系统来管理代码的变更。
  5. 在组件库项目中，使用持续集成工具来自动化构建和测试过程。

总结

通过在vue-cli3下创建libs库，可以更有效地管理和复用代码，同时也可以提高组件开发的规范性。