模仿element-ui封装vue组件库（六）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const path = require('path')
module.exports = {
  pages:{
    index:{
      // 修改项目入口文件
      entry:'examples/main.js',
      template:'public/index.html',
      filename:'index.html'
    }
  },
  // 扩展webpack配置,使webpages加入编译
  chainWebpack: config => {
    config.module
    .rule('js')
    .include.add(path.resolve(__dirname,'packages')).end()
    .use('babel')
    .loader('babel-loader')
    .tap(options => {
      return options
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 整个包的入口
// 统一导出
// 导出颜色选择器组件
import Button from './button'
import Dialog from './dialog'
import Input from './input'
import Checkbox from './checkbox'
import Radio from './radio'
import RadioGroup from './radio-group'
import Switch from './switch'
import CheckboxGroup from './checkbox-group'
import Form from './form'
import FormItem from './form-item'
import './fonts/iconfont.css'

const components = [
  Button,
  Dialog,
  Input,
  Checkbox,
  Radio,
  RadioGroup,
  Switch,
  CheckboxGroup,
  Form,
  FormItem
]
// 定义install方法
const install = function (Vue) {
  // 注册所有的组件
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}
// 判断是否直接引入文件，如果是，就不用调用Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
// 导出install方法
export default {
  install
}

1
vue-cli-service build --target lib

1
2
3
4
5
6
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib":"vue-cli-service build --target lib packages/index.js"
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CSDN:
账号ID：weixiaowei_2016
用户名：耳鼻喉科魏主任

- 本项目仅作为vue组件封装的练习参考

- 初始化vue项目
    vue created demo

- 安装组件库
    npm add one-ui

- 全局导入
    import OneUI form 'one-ui'
    import 'one-ui/lib/one.css'

    Vue.use(OneUI)

1
2
3
4
5
6
7
8
9
10
{
  "name": "one-ui-weizhuren",
  "version": "0.1.0",
  "private": false,
  "main": "dist/one-ui-upload.umd.min.js",
  "author": {
    "name": "weizhuren",
    "CSDN": "耳鼻喉科魏主任",
    "github":"https://github.com/weizhuren/one-ui"
  },

1
2
3
4
5
6
7
8
9
  "name": "one-ui-weizhuren",
  "version": "0.1.0",
  "private": false,
  "main": "dist/one-ui-upload.umd.min.js",
  "author": {
    "name": "weizhuren",
    "CSDN": "耳鼻喉科魏主任",
    "github":"https://github.com/weizhuren/one-ui"
  },

1
2
3
4
5
6
7
8
9
# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

1
2
3
4
PS E:vue封装组件one-ui> npm login
Username: **********
Password:
Email: (this IS public) **********

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
import OneUI from 'one-ui-weizhuren'
import 'one-ui-weizhuren/dist/one-ui-upload.css'

Vue.config.productionTip = false
Vue.use(OneUI)
new Vue({
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
<template>
  <div id="app">
    <one-button type="primary">确认</one-button>
  </div>
</template>