VUE进阶- 搭建属于自己的 UI 组件库

创建项目

vue create root-ui

选择项目配置项

Babel
css Pre-processors  >  scss(iconfont库、Element ui都用，个人也用，建议选择)
Linter / Formatter

清空文件内容：App.vue

在文件夹Components 内创建组件

目录调整

packages	用于存放所有组件
examples	用于进行测试，把 src 改成 examples

修改入口文件

• 在根目录创建 vue.config.js,内容添加：

const path = require('path') 
module.exports = {
	pages: { 
		index: {
			//修改项目的入口文件
			entry: 'examples/main.js', 
			template: 'public/index.html',
			filename: 'index.html'
		}
	},
	//扩展webpack配贾.，仗packages加入编译 
	chainWebpack: config => { 
		config.module
			.rule('js')
			.include.add(path.resolve(_dirname, 'packages')).end()
			.use('babel')
			.loader('babel-loader')
			.tap(options => {
				//修改它的选项...
				return options
			})
	}
}

把写好组件放进打包目录

• components 内组件文件拷贝至 packages 目录下
• 把静态资源，如字体图标等，当做组件放进打包目录，目录如下：
  

在打包目录创建入口文件 index.js,内容如下：

//引入做好的组件
import Button from './button'
import Dialog from './dialog'
import Input from './input'
import *./fonts/font.scss *
//存储组件列表
const components = [
	Button, 
	Dialog,
	Input,
	....
]

const install = function (Vue) {
	//全局注册所有的组件
	components.forEach((item) => {
		Vue.component(item.name,item)
	})
}
//判断是否直接 script 引入文件，如果是，就不用调用Vue.USe() 
if (typeof window !== 'undefined' && window.Vue) { 
	install(window.Vue)
}
//导出 install 函数
export default { install }

添加打包成库命令

"lib": "vue-cli-service build --target lib packages/index.js"
	// packages/index.js		为指定打包文件

上传至 Git

登录 Git 并创建一个仓库

同步远程仓库

• 查看本地文件状态

git status

• 把文件提交至缓存区

git add .

• 提交至本地仓库

git commit -m '提交描述'

• 再执行新仓库的一条命令
  

git remte add origin git@github.com:***/***.git
//再执行以上红框下面一句命令
git push -u origin master

• 最后提交 Git 远程仓库成功

发布至 npm

修改 package.json

"name": "组件名称",
"version": "0.1.0",	//组件版本
"private": false,	//是否私有，私有需要交费的，这里是公开的
"main": "dist/组件名.umd.min.js",	//默认指定引用文件
"author": {
	"name": "author作者，爱加不加"
}

添加 npm 提交的一个配置文件

• 配置不提交的目录或者文件名

//忽略目录
examples/ 
packages/ 
public/

//忽略指定文件 
vue.config.js 
babel.config.js 
*.map

提交至 npm

• npm 的源地址，必须是https://registry.npmjs.org/
• 淘宝源 和 官网源 的切换，请见：、
  npm源地址切换
• 然后执行以下命令，进行npm登录

npm login

• 输入账号、密码、邮箱
• 最后执行以下命令，提交到 npm

npm publish

• 在这里你的命令行提示有：
  
• 代表上传成功