vue封装组件并发布到npm，不打包源码版

1. 安装创建vue项目

vue create pengxiangfei-ui

2. 启动项目并安装and-desgin ui库

npm i --save ant-design-vue

3. 在根目录创建一个components文件夹下封装两个组件

1. fei-button.vue文件

   <template>
     <div class="fei-button">
        <a-button type="primal" @click="showConfirm">Confirm666</a-button>
     </div>
   </template>
   
   <script>
   export default {
     name: 'feiButton',
      methods:{
       showConfirm() {
         this.$confirm({
           title: 'Do you Want to delete these items?',
           content: 'ewrwerewrewr',
           onOk() {
             console.log('OK');
           },
           onCancel() {
             console.log('Cancel');
           },
           class: 'test',
         });
       }
      }
   }
   </script>
   
   <style>
   
   </style>
   

2. fei-table.vue文件

   <template>
     <div>
         <a-table :columns="columns" :data-source="data">
       <a slot="name" slot-scope="text">{{ text }}</a>
       <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
       <span slot="tags" slot-scope="tags">
         <a-tag
           v-for="tag in tags"
           :key="tag"
           :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
         >
           {{ tag.toUpperCase() }}
         </a-tag>
       </span>
       <span slot="action" slot-scope="text, record">
         <a>Invite 一 {{ record.name }}</a>
         <a-divider type="vertical" />
         <a>Delete</a>
         <a-divider type="vertical" />
         <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
       </span>
     </a-table>
     </div>
   </template>
   
   <script>
   const columns = [
     {
       dataIndex: 'name',
       key: 'name',
       slots: { title: 'customTitle' },
       scopedSlots: { customRender: 'name' },
     },
     {
       title: 'Age',
       dataIndex: 'age',
       key: 'age',
     },
     {
       title: 'Address',
       dataIndex: 'address',
       key: 'address',
     },
     {
       title: 'Tags',
       key: 'tags',
       dataIndex: 'tags',
       scopedSlots: { customRender: 'tags' },
     },
     {
       title: 'Action',
       key: 'action',
       scopedSlots: { customRender: 'action' },
     },
   ];
   
   const data = [
     {
       key: '1',
       name: 'John Brown',
       age: 32,
       address: 'New York No. 1 Lake Park',
       tags: ['nice', 'developer'],
     },
     {
       key: '2',
       name: 'Jim Green',
       age: 42,
       address: 'London No. 1 Lake Park',
       tags: ['loser'],
     },
     {
       key: '3',
       name: 'Joe Black',
       age: 32,
       address: 'Sidney No. 1 Lake Park',
       tags: ['cool', 'teacher'],
     },
   ];
   
   export default {
       name: 'feiTable',
   data() {
       return {
         data,
         columns,
       };
     }
   }
   </script>
   
   <style>
   
   </style>
   

3. index.js文件

   // 统一导出 // 导入颜色选择器组件 
   import feiButton from './fei-button.vue'
   import feiTable from './fei-table.vue'
   
   
   import { version } from '../package.json'
    
   // 存储组件列表 
   const components = [ feiButton , feiTable ]
    
   // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册 
   const install = function (Vue) { // 遍历注册全局组件 
   	components.forEach(component => { 
   		Vue.component(component.name, component) 
   	}) 
   }
    
   // 判断是否是直接引入文件,如果是，就不用调用 Vue.use() 
   if (typeof window !== 'undefined' && window.Vue) { 
   	install(window.Vue)
   }
    
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装 
   export default { 
       version,
       ...components, // 按需引入
   	install 
   }
   

4. 在App.vue引入看下组件效果

<template>
		  <div id="app">
		    <feiButton />
		    <feiTable />
		  </div>
		</template>
		
		<script>
		import feiButton from '../components/fei-button.vue'
		import feiTable from '../components/fei-table.vue'
		export default {
		  name: 'App',
		  components: {
		    feiButton,
		    feiTable
		  }
		}
		</script>
		
		<style>
		</style>

到此步组件封装完毕

5. 开始上传npm

// 登录
npm  login
// 发布
npm publish

详见此链接

6.在新的项目中安装引入我们上传的项目并使用

main.js

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false
// 引入上传的公共组件
import myUI from 'pengxiangfei-ui/src/main'

Vue.use(Antd)
Vue.use(myUI)
let app = new Vue({
  render: h => h(App),
})
app.$mount('#app')

引入后直接使用

  <div id="app">
    <feiButton />
    <feiTable />
  </div>

谢谢观看