这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

1 概述

相信很多前端小伙伴都写过不少Vue的组件, 其中必然有可以沉淀下来的内容

那么如何创建一个自己的Vue组件呢?

先来列举下本教程必备的工具:

Vue CLI
pnpm
VuePress

2 搭建项目

2.1 使用Vue CLI创建项目

在我之前的文章中, 介绍过如何利用Vue CLI的图形化界面创建Vue项目并保存模板

有需要的小伙伴可以阅读Vue利用可视化界面创建项目

在此不再赘述

2.2 调整项目解构

创建完成后, 目录结构大致如下:

开发依赖和开发项目不同, 我们需要包含以下三个目录:

调整过程也不麻烦

我们先创建packages和lib目录, 空文件夹即可

接下来将src目录更名为examples

还没结束, 我们需要修改vue.config.js(如果没有则创建), 将入口文件调整为examples的main.js:

const debug = process.env.NODE_ENV !== 'production';
module.exports = {
  pages: {
    index: {
      // 页面入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'pubilc/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
}

现在可以尝试pnpm serve, vue的示例项目可以正常访问

3 开始编码

项目结构调整结束后, 我们就可以把packages目录当作项目的主目录开始编写代码

同时在examples中进行引用, 开发时可以启动Vue项目进行测试

编写组件代码的细节以后再详细讲述(我懒)

4 编译

代码开发完成后, 我们需要进行编译

修改package.json, 增加编译脚本命令lib即可:

{
  "name": "test",
  "version": "0.1.0",
  "main": "packages/index.js",
  "scripts": {
    "lib": "vue-cli-service build --target lib --name test --dest lib packages/index.js"
    ...
  }
}

其中test为组件名称, 可自行替换

5 文档

一个优秀的组件一定有更加优秀的文档

使用(VuePress)和Markdown便可重现一份与官方一模一样的高大上文档

6 发布到NPM

网上有太多类似的教程了, 你需要的只是一个免费的NPM账号

创建自己的Vue组件