一. 环境配置

全局安装 vue-cli：

二. 初始化项目

这里使用官方的 vue-cli 初始化一个 Vue 项目

vue-cli.png

npm run.png

三.写插件

在 src 文件夹下面建 lib 文件夹，用于存放插件。整个项目目录如下所示

目录.png

内容.png

写插件.png

四.本地测试

4.1 将 App.vue 多余代码删除。

4.2 在 main.js 中引入

本地测试引入.png

4.3 在 App.vue 中使用

本地测试.png

4.4 本地测试的结果

本地测试1.png

伍. 配置打包

5.1 修改 package.json

因为组件包是公用的，所以private为false
配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径

package.png

5.2 修改 .gitignore 文件

因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。

ignore.png

5.3 修改 index.html文件

5.4 修改webpack.base.conf.js

修改打包入口文件

base.png

5.5修改webpack.prod.conf.js

为了支持多种使用场景，我们需要选择合适的打包格式。
UMD 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。Webpack 中指定输出格式的设置项为 output.libraryTarget

prod.png

另外，为了将css打包成一个文件，所以需要修改 webpack.prod.conf.js 中的
plugins 选项

css.png

六.用npm打包

打包.png

6.1发布到npm

在 npm官网 注册一个npm账号
登录npm账号，输入用户名、密码、邮箱
执行npm publish
这里如果之前切换过数据源，得切换回来

登录npm.png

6.2 发布成功

可以在npm官网上搜到自己写的组件

发布成功.png

七.使用

新建另一个项目
在main.js引用，在App.vue使用

引用.png

使用.png

效果.png

八.组件UI库的搭建

组件库的结构

组件库结构.png

在components目录下放所有的组件，现在用tag标签组件做展示。
公共的样式可以写在styles文件夹下，在index文件里引入。

样式入口.png

公共样式.png

index.js作为组件库的入口。

组件库入口.png

views文件夹下的home.vue是示例页面。

组件库示例.png

组件库的打包，在package.json文件中创建打包命令

UI库打包.png

创建命令，这里为了方便新建了打包配置文件

UI库打包配置文件.png

打包配置代码

组件库打包.png

九.编写API文档

选用docsify,因为它本身也是基于vue写的，用Markdown写文档直接发布，入门简单，容易使用并且轻量，支持自定义主题
安装

npm i docsify-cli -g

初始化文档

默认初始化在当前目录，推荐将文档放在 docs 目录下

docsify init docs

在根目录你会发现新增了docs目录，这里面都是Markdown格式，建一个components目录放置组件的md，这里贴出我的目录：

文档结构.png

启动本地服务

启动一个 server 方便预览，打开
http://localhost:3000

docsify serve docs

文档页面构建.png

更多选项参考

docsify-cli

主题

目前提供 vue.css 和 buble.css，直接修改 index.html 里的 cdn 地址即可

<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">

侧边栏 load-sidebar

读取侧边栏配置文件，如果配置，默认加载当前目录下的_sidebar.md。如果文件不存在，会显示 TOC 作为侧边栏内容。

<script src="/lib/docsify.js" data-load-sidebar></script>

你可以指定侧边栏文件名

<script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>

sidebar结构.png

repo

文档的右上角的 GitHub 图标，如果要开启的话，将 index.html 里的 script 改成

<script src="//unpkg.com/docsify" data-repo="your/repo"></script>

这些配置也可以直接在index.html页面配置

文档配置.png

部署

在GitHub上新建一个Csourer.github.io的项目，
将项目 push 到 GitHub 仓库后到设置页面开启 GitHub Pages 功能，选择 docs/ 选项
UI组件库文档

文档.png

十.组件库预览页面

在package.json页面创建打包命令

添加打包命令.png

预览页面打包.png

这是现在发布到Github上的预览地址
在线示例

在线示例.png