从零搭建一个vue项目npm组件库

创建一个组件项目

新建一个vue项目

vue create 项目名称

这里我就选择了默认的vue2.0

调整目录

|-- examples // 原 src 目录，改成 examples 用作示例展示
|-- packages // 新增 packages 用于编写存放组件

根目录下新建 vue.config.js文件

src 目录更名为 examples ，导致项目无法运行
在 vue.config.js 添加以下配置

module.exports = {
   
  // 修改 src 为 examples
  pages: {
   
    index: {
   
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  }
}

在packages 文件夹下创建第一个组件

目录结构 结构开心就好 不是必须此形式

//packages /table/index.js  添加以下代码
// 导入组件，组件必须声明 name
import formTable from './index.vue';
// 为组件提供 install 安装方法，供按需引入
formTable.install = function(Vue) {
   
    Vue.component(formTable.name, formTable);
};
// 默认导出组件
export default formTable;

packages /table/index.vue 添加以下代码

<template>
  <div>这是一个table组件啊</div>
<