使用vue框架搭建ui库

302 阅读1分钟

1. 创建vue项目(我选择的是2.x的版本)

 1-1 使用命令行创建vue
npm install @vue/cli -g
vue create '项目名'
1-2 改变vue脚手架内容
  1-2-1 将原src目录更名为examples
  1-2-2 新建packages目录
  1-2-3 新建vue.config.js文件

2. 创建组件

 2-1package目录下新建一个组件,目录格式如下:
 	package
    	——组件名文件夹
          —— src
            —— index.vue
            	index.vue内容如下:
<template>
 <div class="x-button">
   <slot></slot>
 </div>
</template>
<script>
export default {
 name: "x-button",
 props: {
   type: String
 }
};
</script>

<style scoped>
.x-button {
 display: inline-block;
 padding: 3px 6px;
 background: #000;
 color: #fff;
}
</style>
          —— index.js
        		index.js内容如下:
// 导入组件,组件必须声明 name
import XButton from './src/index.vue'
// 为组件提供 install 安装方法,供按需引入
XButton.install = function(Vue) {
      Vue.component(XButton.name, XButton)
  }
  // 导出组件
export default XButton

3. 配置package.json文件

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name xui --dest lib packages/index.js"
  }

4. 需要编写package文件的description,keywords等,具体介绍如下:

  • description 组件库的描述文本

  • keywords 组件库的关键词

  • license 许可协议

  • repository 组件库关联的git仓库地址

  • homepage 组件库展示的首页地址

  • main 组件库的主入口地址(在使用组件时引入的地址)

  • private 声明组件库的私有性,如果要发布到npm公网上,需删除该属性或者设置为false

  • publishConfig 用来设置npm发布的地址,这个配置作为团队内部的npm服务器来说非常关键,可以设置为私有的npm仓库

5.发布到npm


  // 本地编译组件库代码
  npm run lib
  // 登录
  npm login
  // 发布
  npm publish
  // 如果发布失败提示权限问题,请执行以下命令
  npm publish --access public

6. 发布之后在下载使用时

import vui from '@alex_xu/vui'
import '/@alex_xu/vui/lib/vui.css'
Vue.use(vui)