vue3-emoji

vue3emoji是一款小巧的emoji选择组件，支持了自定义板块、自定义尺寸、自定义主题等各种功能，你可以通过配置来改造出属于你的emoji选择组件，此外。vue3emoji也是我的第一款vue3组件。\

vue3-emoji

制作经过

起初，搭建博客的时候，在某些评论或者留言的板块，就有着这种需求了。那就是需要一些表情来丰富评论的内容。当然，我并没有萌生自己造轮子的想法，而是直接使用了别人的emojipicker，在用着用着之后，由于一些功能和需求的变更，我对emoji组件的使用产生了一点困惑以及感受到不便性，但又不好直接在项目里直接开始造轮子，于是我就新开了一个repo，专门用于开发emoji的选择组件。

仓库：github.com/ADKcodeXD/V…

首先我就是在github上寻找emoji相关的datajson，并且将其拉到项目中，对emoji进行了一个渲染，这样起初的布局就造好了。like this\

布局效果

开发组件这种项目，也是我第一次接触，首先就是和平时写网站时的不同，那就是需要考虑很多适用性和扩展性的因素，以及各种情况的考虑。
因为不是像写网站那样嘛：跑起来就算成功。组件需要考虑到各种人员的使用并且将配置做到易配易懂。
另外就是需要减少对各种依赖的使用，由于一个组件是需要考虑到大小的，如果组件大小太大，那么就会成为重量级组件，让人无法轻易的在项目中使用。所以出了vue3和一些常用的开发依赖之外，我并没有引入任何其他的依赖。那这样大部分的效果都要依赖于原生js去实现。

组件布局的样式问题

在组件仓库中写好效果了，同样也是需要自己去引入和测试。我的测试量比较少，毕竟组件用的人也没那么多。所以可能在不同的设备上也会存在不同的样式问题和一些其他的适配效果的不同。这种情况只能依靠于那若有若无的issue了（如果真有人用的话）

在开发的时候，我也遇到了一些问题，就是打包好组件引入的时候。grid的布局缩小的情况和引入的情况。其中，在写组件时还是尽量需要避免开scoped，因为在项目引入中就基本上自带了样式隔离。而grid布局的情况更多还是被一些样式覆盖的css所造成的问题，不过后续我也修复成了比较易用的写法。

此外就是命名的问题，对于组件的样式或者属性名，还是最好加上一些特定的前缀。加上前缀的好处就是能够更加直白的分辨是否属于本组件，另外也能够比较一些通用的命名造成了样式冲突或者命名上的冲突

导出文件由于只有一个组件，所以就不像传统组件库那样，对每个组件使用install，我直接进行导出即可

import V3Emoji from '../components/V3Emoji.vue';
export default V3Emoji as typeof V3Emoji;

配置好这个之后，就可以去vite进行配置打包相关的选项：

build: {
    lib: {
      entry: path.resolve(__dirname, 'src/packages/index.ts'),
      name: 'V3Emoji',
      fileName: format => `Vue3Emoji.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }

lib指定了我的导出的文件目录，然后fileName则指定了打包好后的命名，vite会自动帮我打包成esmodule和cjs两种情况。
接下来就是进行yarn build 可以看到文件目录如下\

dist 目录

那么这一步做好了，那就是去配置package.json了

"name": "vue3-emoji",
  "private": false,
  "author": "ADKCodeXD",
  "description": "一个简单的Emoji表情选择组件",
  "version": "1.2.0",
  "license": "MIT",
  "main": "dist/Vue3Emoji.umd.js",
  "module": "dist/Vue3Emoji.es.js",
  "style": "dist/style.css",
  "type": "module",
  "typings": "types/type.d.ts",
  "bugs": {
    "url": "https://github.com/ADKcodeXD/Vue3-Emoji/issues"
  },
  "homepage": "https://github.com/ADKcodeXD/Vue3-Emoji",
  "keywords": [
    "vue3-emoji",
    "emoji",
    "vue3-emoji-component",
    "emoji-component",
    "vue3emoji"
  ],
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "import": "dist/Vue3Emoji.es.js",
      "require": "dist/Vue3Emoji.umd.js"
    },
    "./*": "./*"
  },

这里比较关键的地方就是files和exports 两个地方了。
当然，作为一个开源组件，我们也需要做好workflows和版本管理，不能每次发布没有章法。所以需要配置一下workflow

name: CD
on:
  # 以主干的push事件作为触发条件
  push:
    branches: main
jobs:
  CD:
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout repository
        uses: actions/checkout@v2
      # 下载Node
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "16.x"
      # 添加缓存，逻辑和CI Workflow里的一样
      - name: Cache
        id: cache-dependencies
        uses: actions/cache@v3
        with:
          path: |
            **/node_modules
          key: ${{runner.OS}}-${{hashFiles('**/yarn.lock')}}
      # 安装依赖。命中缓存则跳过此步
      - name: Installing Dependencies
        if: steps.cache-dependencies.outputs.cache-hit != 'true'
        run: yarn install
      # 运行eslint并且fix代码
      - name: Eslint fix
        if: steps.cache-dependencies.outputs.cache-hit != 'true'
        run: yarn lint:fix
      # 从package.json里获取version属性的值
      # 在CD Workflow中会给每个生成的制品打上标签，而标签取值于version值
      - name: Read Version
        # 读取出来的值会放在steps.[id].outputs.value供其他步骤step读取
        id: version
        uses: ashley-taylor/read-json-property-action@v1.0
        with:
          path: ./package.json
          property: version
      # 打包生成制品，且把制品压缩到assets.zip压缩包里
      - name: Building
        run: |
          yarn build
          zip -r assets ./dist/**
      # 基于当前commit进行版本发布(Create a release)，tag_name是v前缀加上package.json的version值
      - name: Create GitHub Release
        # 此步骤中，版本发布后会返回对应的url，以供下面上传制品的步骤中读取使用
        id: create_release
        uses: actions/create-release@v1
        env:
          # GITHUB_TOKEN是准备工作步骤三申请的Personal Access Token
          GITHUB_TOKEN: ${{ secrets.PROJECT_ACCESS_TOKEN }}
        with:
          tag_name: v${{steps.version.outputs.value}}
          release_name: v${{steps.version.outputs.value}}
          draft: false
          prerelease: false
      # 把assets.zip上传到仓库对应的发布版本Release上
      - name: Update Release Asset
        id: upload-release-asset
        uses: actions/upload-release-asset@v1
        env:
          GITHUB_TOKEN: ${{ secrets.PROJECT_ACCESS_TOKEN }}
        with:
          upload_url: ${{ steps.create_release.outputs.upload_url }}
          asset_path: ./assets.zip
          asset_name: assets.zip
          asset_content_type: application/zip

这个文件主要依赖github action ，在我们每次进行push代码时读取相应的版本号并且将其发布成release

最后，则需要注册好npm的账号，在命令行中npm login
npm login后如果报错，大概率是淘宝源的缘故，如果是这个缘故则需要切换为npm源，我推荐使用nrm进行切换:

//需要全局安装nrm
npm install -g nrm
nrm use npm
//切换回淘宝
nrm use taobao

做好准备，登录好之后，就可以使用npm pubilsh 进行包的上传啦~

使用

发布包之后，就可以在项目中npm install 自己的包，引入css文件，那么组件大概率就是能用的了。如果想要更多人使用你的组件，那么写一份详细的readme是很必要的。

这里附上我的npm地址和github地址：
npm:www.npmjs.com/package/vue…
github:github.com/ADKcodeXD/V…

vue3 emoji 我的第一款vue3组件组件的发布和制作感想

vue3-emoji

制作经过

开发组件的感受和平时做项目的不同之处

组件布局的样式问题

自定义功能

目录结构

打包发布

使用

vue3 emoji 我的第一款vue3组件 组件的发布和制作感想

vue3 emoji 我的第一款vue3组件组件的发布和制作感想