如何扩展element-ui应用项目

Github地址被我删除了，不记得这里文章有引用了，有需要的话可联系，在上传一份到github

项目中可能会遇到需要扩展已经用到的前端框架，并且想在其文档中维护项目开发中新添加的组件。这里以element-ui扩展一个之前写的日历组件，并且应用到项目中使用。

doc维护页面

先看一下添加vue日历组件之后在页面的添加的日历组件展示。

扩展element-ui步骤

首先fork github项目

如下图，红色提交为本地扩展之后的提交，https://github.com/rodchen-king/element/commits/dev

修改doc左侧菜单 examples/nav.config.json

{"groupName": "自定义组件","list": [{"path": "/calendar","title": "日历"}]
}

添加对应组件（日历）使用介绍 examples/docs/zh-CN/calendar.md

### 基本用法日历基本使用。:::demo
```html
<template><vue-calendar />
</template>
```
:::日历以周日开始第一天。
:::demo
```html
<template><vue-calendar :week-label-index="0" />
</template>
```:::### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| week-label-index     | 日历是否从周一开始          | string | 0（周日）/1（周一）/2（周二）/3（周三）/4（周四）/5（周五）/6（周六） | 1 |### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| dayClick | 点击日历事件 | — |

添加对应日历源文件

修改src./index.js，添加vue-calendar src/index.js

/* Automatically generated by './build/bin/build-entry.js' */import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
import Autocomplete from '../packages/autocomplete/index.js';
import Dropdown from '../packages/dropdown/index.js';
import DropdownMenu from '../packages/dropdown-menu/index.js';
import DropdownItem from '../packages/dropdown-item/index.js';
import Menu from '../packages/menu/index.js';
import Submenu from '../packages/submenu/index.js';
import MenuItem from '../packages/menu-item/index.js';
import MenuItemGroup from '../packages/menu-item-group/index.js';
import Input from '../packages/input/index.js';
import InputNumber from '../packages/input-number/index.js';
import Radio from '../packages/radio/index.js';
import RadioGroup from '../packages/radio-group/index.js';
import RadioButton from '../packages/radio-button/index.js';
import Checkbox from '../packages/checkbox/index.js';
import CheckboxButton from '../packages/checkbox-button/index.js';
import CheckboxGroup from '../packages/checkbox-group/index.js';
import Switch from '../packages/switch/index.js';
import Select from '../packages/select/index.js';
import Option from '../packages/option/index.js';
import OptionGroup from '../packages/option-group/index.js';
import Button from '../packages/button/index.js';
import ButtonGroup from '../packages/button-group/index.js';
import Table from '../packages/table/index.js';
import TableColumn from '../packages/table-column/index.js';
import DatePicker from '../packages/date-picker/index.js';
import TimeSelect from '../packages/time-select/index.js';
import TimePicker from '../packages/time-picker/index.js';
import Popover from '../packages/popover/index.js';
import Tooltip from '../packages/tooltip/index.js';
import MessageBox from '../packages/message-box/index.js';
import Breadcrumb from '../packages/breadcrumb/index.js';
import BreadcrumbItem from '../packages/breadcrumb-item/index.js';
import Form from '../packages/form/index.js';
import FormItem from '../packages/form-item/index.js';
import Tabs from '../packages/tabs/index.js';
import TabPane from '../packages/tab-pane/index.js';
import Tag from '../packages/tag/index.js';
import Tree from '../packages/tree/index.js';
import Alert from '../packages/alert/index.js';
import Notification from '../packages/notification/index.js';
import Slider from '../packages/slider/index.js';
import Loading from '../packages/loading/index.js';
import Icon from '../packages/icon/index.js';
import Row from '../packages/row/index.js';
import Col from '../packages/col/index.js';
import Upload from '../packages/upload/index.js';
import Progress from '../packages/progress/index.js';
import Spinner from '../packages/spinner/index.js';
import Message from '../packages/message/index.js';
import Badge from '../packages/badge/index.js';
import Card from '../packages/card/index.js';
import Rate from '../packages/rate/index.js';
import Steps from '../packages/steps/index.js';
import Step from '../packages/step/index.js';
import Carousel from '../packages/carousel/index.js';
import Scrollbar from '../packages/scrollbar/index.js';
import CarouselItem from '../packages/carousel-item/index.js';
import Collapse from '../packages/collapse/index.js';
import CollapseItem from '../packages/collapse-item/index.js';
import Cascader from '../packages/cascader/index.js';
import ColorPicker from '../packages/color-picker/index.js';
import Transfer from '../packages/transfer/index.js';
import Container from '../packages/container/index.js';
import Header from '../packages/header/index.js';
import Aside from '../packages/aside/index.js';
import Main from '../packages/main/index.js';
import Footer from '../packages/footer/index.js';
import Timeline from '../packages/timeline/index.js';
import TimelineItem from '../packages/timeline-item/index.js';
import VueCalendar from '../packages/vue-calendar/index.js';
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';const components = [Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,Radio,RadioGroup,RadioButton,Checkbox,CheckboxButton,CheckboxGroup,Switch,Select,Option,OptionGroup,Button,ButtonGroup,Table,TableColumn,DatePicker,TimeSelect,TimePicker,Popover,Tooltip,Breadcrumb,BreadcrumbItem,Form,FormItem,Tabs,TabPane,Tag,Tree,Alert,Slider,Icon,Row,Col,Upload,Progress,Spinner,Badge,Card,Rate,Steps,Step,Carousel,Scrollbar,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,Timeline,TimelineItem,VueCalendar,CollapseTransition
];const install = function(Vue, opts = {}) {locale.use(opts.locale);locale.i18n(opts.i18n);components.forEach(component => {Vue.component(component.name, component);});Vue.use(Loading.directive);Vue.prototype.$ELEMENT = {size: opts.size || '',zIndex: opts.zIndex || 2000};Vue.prototype.$loading = Loading.service;Vue.prototype.$msgbox = MessageBox;Vue.prototype.$alert = MessageBox.alert;Vue.prototype.$confirm = MessageBox.confirm;Vue.prototype.$prompt = MessageBox.prompt;Vue.prototype.$notify = Notification;Vue.prototype.$message = Message;};/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {install(window.Vue);
}export default {version: '2.5.4',locale: locale.use,i18n: locale.i18n,install,CollapseTransition,Loading,Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,Radio,RadioGroup,RadioButton,Checkbox,CheckboxButton,CheckboxGroup,Switch,Select,Option,OptionGroup,Button,ButtonGroup,Table,TableColumn,DatePicker,TimeSelect,TimePicker,Popover,Tooltip,MessageBox,Breadcrumb,BreadcrumbItem,Form,FormItem,Tabs,TabPane,Tag,Tree,Alert,Notification,Slider,Icon,Row,Col,Upload,Progress,Spinner,Message,Badge,Card,Rate,Steps,Step,Carousel,Scrollbar,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,Timeline,TimelineItem,VueCalendar
};

修改打包config （/components.json） components.json

{"pagination": "./packages/pagination/index.js","dialog": "./packages/dialog/index.js","autocomplete": "./packages/autocomplete/index.js","dropdown": "./packages/dropdown/index.js","dropdown-menu": "./packages/dropdown-menu/index.js","dropdown-item": "./packages/dropdown-item/index.js","menu": "./packages/menu/index.js","submenu": "./packages/submenu/index.js","menu-item": "./packages/menu-item/index.js","menu-item-group": "./packages/menu-item-group/index.js","input": "./packages/input/index.js","input-number": "./packages/input-number/index.js","radio": "./packages/radio/index.js","radio-group": "./packages/radio-group/index.js","radio-button": "./packages/radio-button/index.js","checkbox": "./packages/checkbox/index.js","checkbox-button": "./packages/checkbox-button/index.js","checkbox-group": "./packages/checkbox-group/index.js","switch": "./packages/switch/index.js","select": "./packages/select/index.js","option": "./packages/option/index.js","option-group": "./packages/option-group/index.js","button": "./packages/button/index.js","button-group": "./packages/button-group/index.js","table": "./packages/table/index.js","table-column": "./packages/table-column/index.js","date-picker": "./packages/date-picker/index.js","time-select": "./packages/time-select/index.js","time-picker": "./packages/time-picker/index.js","popover": "./packages/popover/index.js","tooltip": "./packages/tooltip/index.js","message-box": "./packages/message-box/index.js","breadcrumb": "./packages/breadcrumb/index.js","breadcrumb-item": "./packages/breadcrumb-item/index.js","form": "./packages/form/index.js","form-item": "./packages/form-item/index.js","tabs": "./packages/tabs/index.js","tab-pane": "./packages/tab-pane/index.js","tag": "./packages/tag/index.js","tree": "./packages/tree/index.js","alert": "./packages/alert/index.js","notification": "./packages/notification/index.js","slider": "./packages/slider/index.js","loading": "./packages/loading/index.js","icon": "./packages/icon/index.js","row": "./packages/row/index.js","col": "./packages/col/index.js","upload": "./packages/upload/index.js","progress": "./packages/progress/index.js","spinner": "./packages/spinner/index.js","message": "./packages/message/index.js","badge": "./packages/badge/index.js","card": "./packages/card/index.js","rate": "./packages/rate/index.js","steps": "./packages/steps/index.js","step": "./packages/step/index.js","carousel": "./packages/carousel/index.js","scrollbar": "./packages/scrollbar/index.js","carousel-item": "./packages/carousel-item/index.js","collapse": "./packages/collapse/index.js","collapse-item": "./packages/collapse-item/index.js","cascader": "./packages/cascader/index.js","color-picker": "./packages/color-picker/index.js","transfer": "./packages/transfer/index.js","container": "./packages/container/index.js","header": "./packages/header/index.js","aside": "./packages/aside/index.js","main": "./packages/main/index.js","footer": "./packages/footer/index.js","timeline": "./packages/timeline/index.js","timeline-item": "./packages/timeline-item/index.js","vue-calendar": "./packages/vue-calendar/index.js"
}

命令

启动项目命令，默认端口8085

npm run dev

打lib包命令

npm run dist

执行命令之后可以看到项目中多了lib文件夹，如图。右侧index.js为压缩之后的js文件，当然还有css文件（element\lib\theme-chalk\index.css）

应用lib包到现有项目中去

这里拿之前写的日历进行示例。https://github.com/rodchen-king/vue-calendar

添加lib文件夹，命名为element-ui

项目引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'//引入扩展后的element-ui和css
import ElementUI from '../element-ui/lib/index.js'
import '../element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = falseVue.use(ElementUI)/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

如何扩展element-ui应用项目相关推荐

element ui - el-select 添加可输入功能
element ui - el-select 可以支持输入功能场景思路方法场景 vue2 + element ui 的项目中,产品希望 el-select 可以支持输入功能,也就说用户既可以下 ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...
使用UI创建vue项目并添加element ui和axios
目录简介 Vue简单安装说明项目创建步骤总结简介因为最近一个项目需要使用SPA的方式,而前端选择使用vue来实现.所以最近重新看了下vue的相关知识,发现最新的vue项目可以在web中使用界 ...
在vue项目中快速使用element UI
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速的搭建网站,提高开发的效率 ElementUI PC端 MintUI 移动端一.全部引入安装element-ui cnp ...
Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
目录交易页面提交订单支付页面微信支付个人中心我的订单交易页面 1.静态组件及路由跳转 2.获取交易页数据 (1)接口 //获取用户地址信息地址:/api/user/userAddres ...
实验管理系统springboot+vue+element ui项目开发
实验管理系统某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...