Download vue element pro components - vue element pro components Source Code Unduh

vue element pro components

Kategori lainnya

1.0.0

Unduh

Vue-Element-Pro-Components

1. Instalasi

npm i vue-element-pro-components -s
# 或者
yarn add vue-element-pro-components -s

2. Mulai cepat

2.1 Pendahuluan Lengkap

 import Vue from 'vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue . use ( Element )

import VueElementProComponents from 'vue-element-pro-components'
import 'vue-element-pro-components/lib/theme/index.css'
Vue . use ( VueElementProComponents )

2.2 Pendahuluan atas permintaan

2.2.1 Anda perlu menginstal `babel-plugin-import`

 # yarn 方式安装
yarn add babel-plugin-import -D
# npm 方式安装
npm install babel-plugin-import -D

2.2.2 Mengkonfigurasi Babel

 {
    ...
plugins : [
    [
      "import" ,
      {
        libraryName : "vue-element-pro-components" ,
        // 默认打包是lib,不用更改
        libraryDirectory : "lib" ,
        // 如果有样式文件,因为打包后样式统一放在/lib/theme下,所以需要稍微转换下
        style : ( name , file ) => {
          const libDirIndex = name . lastIndexOf ( "/" ) ;
          const libDir = name . substring ( 0 , libDirIndex ) ;
          const fileName = name . substr ( libDirIndex + 1 ) ;
          return ` ${ libDir } /theme/ ${ fileName } .css` ;
        } ,
      } ,
    ] ,
  ] ,
}

2.2.3 Gunakan komponen

Selanjutnya, jika Anda hanya ingin memperkenalkan beberapa komponen, seperti Dialog dan Form , maka Anda perlu menulis yang berikut di main.js :

 import Vue from 'vue'

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue . use ( Element )

import { Dialog , Form } from 'vue-element-pro-components'

Vue . use ( Dialog )
Vue . use ( Form )
/* 或写为
 * Vue.component(Dialog.name,Dialog)
 * Vue.component(Form.name,Form)
 */

new Vue ( {
  el : '#app' ,
  render : ( h ) => h ( App )
} )

Atau semua memperkenalkan

 import Vue from 'vue'

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue . use ( Element )

import {
  Dialog ,
  Form ,
  Pagination ,
  Search ,
  Table ,
  AdvancedSearch ,
  Drawer
} from 'vue-element-pro-components'

Vue . use ( Dialog )
Vue . use ( Form )
Vue . use ( Pagination )
Vue . use ( Search )
Vue . use ( Table )
Vue . use ( AdvancedSearch )
Vue . use ( Drawer )