@lubanjs/element-ui-plugin
element-ui按需引入插件
Last updated 18 days ago by anth7 .
ISC · Original npm · Tarball · package.json
$ cnpm install @lubanjs/element-ui-plugin 
SYNC missed versions from official npm registry.

@lubanjs/element-ui-plugin

介绍

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

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

使用

安装模块

npm install @lubanjs/element-ui-plugin -D

配置脚本

package.jsonscript属性中写入命令脚本。

 "scripts": {
    "component": "element-ui-plugin -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')

Current Tags

  • 0.1.0-alpha.2                                ...           latest (18 days ago)

2 Versions

  • 0.1.0-alpha.2                                ...           18 days ago
  • 0.1.0-alpha.1                                ...           18 days ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 22
Last Day 0
Last Week 4
Last Month 0
Dependencies (2)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |