从零构建一个Vue UI组件库(二)——编写第一个组件

·  阅读 3430
从零构建一个Vue UI组件库(二)——编写第一个组件

先看下效果ninecat-ui

组件库源码ninecat-ui(如果觉得还不错,可以给个start哦)

从零构建一个Vue UI组件库(一)——项目初始化中我们已经把一个最基本的VUE项目搭建好了,下面我们要开始构建一个最简单的组件,然后可以供外部使用。

编写第一个组件

先在根目录下新建一个packages文件,然后在下面新建一个hello文件夹,开是编写组件。组件作用很简单,就是一个简单的打招呼的组件,传入名字即可,会在页面显示Hello,xxx。

下面看看我们的目录结构:

现在需要来写一下我们的Hello组件。

packages/hello/src/index.vue

<template>
  <div>
    <h2>Hello, {{name}} !</h2>
  </div>
</template>

<script>
export default {
  name:'Hello',
  props:{
    name:{
      type:String,
      default:'Ninecat UI'
    }
  }
}
</script>
复制代码

packages/hello/index.js

import Hello from './src/index.vue'

// install 是默认的方法,供按需引入。
// 当外界在 use 这个组件的时候,就会调用本身的 install 方法,同时传一个 Vue 这个类的参数。

Hello.install = function(Vue){
  Vue.component(Hello.name, Hello)
}

export default Hello
复制代码

组件文件夹之所以这么写是为了让组件有个统一的出口,每个组件文件夹下的src目录是可以扩展组件其他功能。

src/index.vue

<template>
  <div>
    <Hello 
      :name="name"
    />
  </div>
</template>

<script>
import Hello from '../packages/hello'
export default {
  name:'App',
  components:{
    Hello
  },
  data:function(){
    return {
      name:'Terence'
    }
  }
}
</script>
复制代码

OK,到这里我们算封装了一个最简单的Hello组件,但是现在我们还没有实现将组件打包后用npm安装这个组件库,然后引用里面的Hello组件,所以下面需要进行导出配置和打包配置。

配置导出和打包

组件编写好了需要统一导出,现在是一个组件,后面会有很多组件,所以我们需要统一导出组件了。

packages/index.js

import Hello from './hello'

const components = {
  Hello
}

const install = function (Vue) {
  Object.values(components).forEach(component => {
    Vue.component(component.name, component);
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install,
  Hello
}
复制代码

配置打包 build/webpack.config.build.js

'use strict'
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')


module.exports = {
  mode: 'production',
  entry: {
    'ninecatui': './packages/index.js' // 入口文件
  },
  output: {
    path: path.resolve(__dirname, '../package'), // 出口目录
    publicPath: '/package/',
    library: 'ninecatui', // 包名
    libraryTarget: 'umd',
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ]
}

复制代码

到这里基本的打包就可以了,可以本地测试一下。

package.json增加一个打包脚本,

"build": "webpack --config build/webpack.config.build.js"
复制代码

我们来build一下项目:npm run build

会打出一个package文件夹,我们来引用一下这个组件库。

修改一下src/index.js

import Vue from 'vue'
import App from './index.vue'
import Ninecatui from '../package/ninecatui'

Vue.use(Ninecatui)

new Vue({
  render: h => h(App)
}).$mount('#app')
复制代码

修改一下src/index.vue

<template>
  <div>
    <Hello 
      :name="name"
    />
  </div>
</template>

<script>
export default {
  name:'App',
  data:function(){
    return {
      name:'Ninecat UI'
    }
  }
}
</script>
复制代码

一样可以访问。

下一步我们尝试将打包至npm,然后本地安装来引用这个组件库。

第二节源码在ninecat-ui/ninecat-train tag1.0.2

下一章:从零构建一个Vue UI组件库(三)——发布第一个npm包

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改