fit2cloud ui 다운로드 fit2cloud ui 소스 코드 다운로드

fit2cloud ui

타사 구성 요소

v1.9.0

다운로드

fit2cloud ui

FIT2Cloud UI는 Entoll UI의 보조 개발에 기반한 VUE 구성 요소 라이브러리이며, 구성 요소, 필터, 명령어 등을 제공합니다. 엔터프라이즈 소프트웨어 개발에 일반적으로 사용됩니다.

설치하다

npm install fit2cloud-ui

요소 UI를 사용할 때 설치해야합니다.

npm install element-ui

SCSS를 사용해야하므로 SASS를 설치해야합니다.

npm install -D [email protected] [email protected]

완전한 소개

 import Vue from 'vue' ;
import ElementUI from 'element-ui'
import Fit2CloudUI from 'fit2cloud-ui' ;
import "fit2cloud-ui/src/styles/index.scss" ; // 已经包含了element ui的scss
import App from './App.vue' ;

Vue . use ( ElementUI ) ;
Vue . use ( Fit2CloudUI ) ;

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

주문형을 소개합니다

Babel-Plugin-Import를 사용하면 프로젝트 크기를 줄이기위한 목적을 달성하기 위해 필요한 구성 요소 만 소개 할 수 있습니다.

먼저 Babel-Plugin-Component를 설치하십시오.

npm install babel-plugin-import -D

그런 다음 babel.config.js에 다음을 작성하십시오.

 module . exports = {
  presets : [
    '@vue/cli-plugin-babel/preset'
  ] ,
  plugins : [
    [
      "import" ,
      {
        "libraryName" : "fit2cloud-ui" ,
        "customStyleName" : ( name ) => {
          return `fit2cloud-ui/src/styles/components/ ${ name } .scss` ;
        } ,
      } ,
    ] ,
  ]
}

다음으로 SearchBar 및 테이블과 같은 일부 구성 요소를 도입 할 수 있으므로 다음 컨텐츠를 Main.js로 작성해야합니다.

 import Vue from 'vue' ;
import ElementUI from 'element-ui'
import 'fit2cloud-ui/src/styles/require.scss' ; // 已经包含了element ui的scss
import { SearchBar , Table } from 'fit2cloud-ui' ;
import App from './App.vue' ;

Vue . use ( ElementUI ) ;
Vue . use ( SearchBar ) ;
Vue . use ( Table ) ;

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

국제화

vue-i18n 사용

 import Vue from 'vue' ;
import Fit2CloudUI from 'fit2cloud-ui' ;
import "fit2cloud-ui/src/styles/index.scss" ; // 已经包含了element ui的scss
import zhCN from "fit2cloud-ui/src/locale/lang/zh-CN" ;
import App from './App.vue' ;

const message = {
  'zh-CN' : {
    hello : '你好' ,
    ... zhCN
  }
}

const i18n = new VueI18n ( {
  locale : 'zh-CN' ,
  messages ,
} ) ;

Vue . use ( Fit2CloudUI , {
  i18n : ( key , value ) => i18n . t ( key , value )
} ) ;

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