如何发布制作vue组件

Posted 2021-02-20 homehtml

引言

如果你自己做了一个感觉还不错的vue组件，而想分享给别人或者发布到npm上，那该怎么办呢？

vue-share-components

分享一个大神做的一个 vue 模板，这个模板集成了本地测试和打包发布，项目地址 https://github.com/Akryum/vue...

附上我的 github https://github.com/Jon-Millent [捂脸]

使用

安装

npm i -g vue-cli
vue init Akryum/vue-share-components your-component-name
npm install
npm run dev

发布

npm publish

打包

npm run build

最后别人就可以这样使用你的组件了

npm install your-component-name --save

import { Test } from ‘your-component-name‘

补充

如果你的组件里有图片和其他资源，会打包出错，请按照下面步骤解决

• 安装两个loader

  npm install url-loader --save
  npm install file-loader --save

• 修改添加 /config/webpack.config.base.js 添加规则，下面是示例

  rules: [
    {
      test: /.(png|jpe?g|gif|svg)(?.*)?$/,
      loader: ‘url-loader‘,
      options: {
        limit: 10000,
      }
    },
    {
      test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
      loader: ‘url-loader‘,
      options: {
        limit: 10000
      }
    }
  ]

本文转载于:猿2048?https://www.mk2048.com/blog/blog.php?id=hbk1c212j0j