xd-element-ui-plugin-component v0.0.2

xd-element-ui-plugin-component

介绍

适用于vue的UI库element-ui，当选择使用其官网介绍的按需引入组件的方式时，可以使用该模块。其目的是为了减少写代码的工作量，通过脚本的形式自动生成按需引用的相关代码。

注意：请确认使用该模块前，已经按照element-ui介绍的按需引入组件的方式，修改了代码和依赖！！！

使用

安装模块

npm install xd-element-ui-plugin-component -D

配置脚本

在package.json的script属性中写入命令脚本。

 "scripts": {
    "component": "xd-element-ui-plugin-component -i /src/xxx.txt -o /src/xxx.js",
  },

命令行属性: -i --input value 入口文件地址 -o --output value 生成文件路径

使用步骤

在-i参数指定的路径下创建对应的文件，在文件中写入需要的按需引入的组件名称，每个组件名称之间换行，内容如下所示。

  Row,
  Col,
  Button,
  Message,
  Container,
  Header,
  Aside,
  Collapse,
  CollapseItem,
  ColorPicker,
  Dialog,
  Tabs,
  TabPane,
  Checkbox,
  Input,
  Table,
  TableColumn,
  Select,
  Option,
  RadioGroup,
  RadioButton,
  InputNumber

在-o参数后面指定生成文件的路径，注意由于vue-cli指定开发代码必须放在src文件夹下面，所以生成的文件也必须放在该目录下面，才能正常使用，比如指定路径位/src/xxx.js则会在src目录下生成xxx.js文件，具体内容如下。

/* eslint-disable */

'use strict'

import Vue from 'vue'
import {
  Row,
  Col,
  Button,
  Message,
  Container,
  Header,
  Aside,
  Collapse,
  CollapseItem,
  ColorPicker,
  Dialog,
  Tabs,
  TabPane,
  Checkbox,
  Input,
  Table,
  TableColumn,
  Select,
  Option,
  RadioGroup,
  RadioButton,
  InputNumber
} from 'element-ui'

Vue.use(Row)
Vue.use(Col)
Vue.use(Button)
Vue.use(Message)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(ColorPicker)
Vue.use(Dialog)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Checkbox)
Vue.use(Input)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Select)
Vue.use(Option)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.use(InputNumber)

最后在main.js中引入该生成的文件。

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import './registerServiceWorker'

import './xxx.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')