将自己写的组件封装成类似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 @ 2024-03-21 09:53  醉温柔  阅读(49)  评论(0编辑  收藏  举报