将自己写的组件封装成类似element-ui一样的库,可以cdn引入

在写好自己的组件之后

第一步 修改目录结构

  在根目录下创建package文件夹,用于存放你要封装的组件

第二部

  在webpack配置中加入

  pages与publicpath同级

  pages: {

    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
 
第三部 编写组件
  在package文件夹下
  新建一个你的组件名的文件夹 
  里面存放一个你的组件的.vue文件
  再新建一个js文件  用于将你的组件暴露出来
  
    import Grid from './grid.vue'
    // 为组件提供 install 安装方法,供按需引入
    Grid.install = function (Vue) {
      Vue.component(Grid.name, Grid)
    }
    // 默认导出组件
    export default Grid;
 
第四步  在package文件夹下新建一个js 文件(我命名index.js)
  
  import Toolbar from './toolbar/index';
  // 存储组件列表
  const components = [
    Toolbar
  ]
  // 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
  const install = function (Vue) {
    // 判断是否安装
    if (install.installed) return
    // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
  }
  // 判断是否是直接引入文件
  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
  }
  export default {
    // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    Toolbar,
  }
 
最后一步
  package.json文件中添加命令
 
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name my --dest lib packages/index.js"
  },
 
最后运行  npm run lib  就发现多了一个lib文件夹  里面就存放的你打包好的js以及css
 
 
 
 
 
 
posted @ 2019-06-14 13:51  Mr_R  阅读(2269)  评论(0编辑  收藏  举报