fit2cloud ui

Fit2cloud ui

Fit2Cloud UI ist eine VUE -Komponentenbibliothek, die auf der sekundären Entwicklung der Elemente -UI basiert und Komponenten, Filter, Anweisungen usw. bietet.

Installieren

npm install fit2cloud-ui

Element UI muss bei der Verwendung installiert werden

npm install element-ui

Da Sie SCSS verwenden müssen, müssen Sie SASS installieren

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

Vollständige Einführung

 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 )
} ) ;

Auf Nachfrage einführen

Mit Babel-Plugin-Import können wir nur die erforderlichen Komponenten einführen, um die Größe des Projekts zu verringern.

Installieren Sie zuerst Babel-Plugin-Komponenten:

npm install babel-plugin-import -D

Schreiben Sie dann Folgendes in 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` ;
        } ,
      } ,
    ] ,
  ]
}

Als nächstes können einige Komponenten eingeführt werden, wie z. B. Suchleiste und Tabelle, sodass der folgende Inhalt in main.js geschrieben werden muss:

 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 )
} ) ;

Internationalisierung

Verwenden von 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 )
} ) ;

Komponentendokumentation

Dokumentadresse: https://fit2cloud-ui.github.io/docs/

Anerkennung

• Element Dank an Element für die exzellente Komponentenbibliothek

Lizenz & Urheberrecht

Copyright (C) 2014-2024 Feizhiyun Fit2Cloud, alle Rechte vorbehalten.

Lizenziert gemäß der GNU General Public Lizenz Version 3 (GPLV3) (die "Lizenz"); Sie dürfen diese Datei nur in Übereinstimmung mit der Lizenz verwenden. Sie können eine Kopie der Lizenz bei erhalten

https://www.gnu.org/licenses/gpl-3.0.html

Sofern nicht nach geltendem Recht oder schriftlich zu vereinbart wird, wird die im Rahmen der Lizenz verteilte Software auf "As ist" Basis ohne Gewährleistung oder Bedingungen jeglicher Art, entweder ausdrücklich oder impliziert, verteilt. Siehe die Lizenz für die spezifischen Sprachberechtigungen und Einschränkungen im Rahmen der Lizenz.