fit2cloud ui

Ui fit2cloud

FIT2Cloud UI es una biblioteca de componentes VUE basada en el desarrollo secundario de la interfaz de usuario de elementos, proporcionando componentes, filtros, instrucciones, etc. comúnmente utilizados en el desarrollo de software empresarial.

Instalar

npm install fit2cloud-ui

El elemento UI debe instalarse al usarlo

npm install element-ui

Debido a que necesita usar SCSS, debe instalar Sass

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

Introducción completa

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

Introducir a la demanda

Con Babel-Plugin-Import, solo podemos introducir los componentes requeridos para lograr el propósito de reducir el tamaño del proyecto.

Primero, instale babel-plugin-component:

npm install babel-plugin-import -D

Luego, escriba lo siguiente en 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` ;
        } ,
      } ,
    ] ,
  ]
}

A continuación, se pueden introducir algunos componentes, como SearchBar y Table, por lo que el siguiente contenido debe escribirse en 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 )
} ) ;

Internacionalización

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

Documentación componente

Dirección del documento: https://fit2cloud-ui.github.io/docs/

Expresiones de gratitud

• Elemento gracias al elemento por la excelente biblioteca de componentes

Licencia y derechos de autor

Copyright (c) 2014-2024 Feizhiyun Fit2Cloud, todos los derechos reservados.

Licenciado bajo la GNU General Public License Versión 3 (GPLV3) (la "Licencia"); No puede usar este archivo, excepto de conformidad con la licencia. Puede obtener una copia de la licencia en

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

A menos que la ley aplicable sea requerida o acordado por escrito, el software distribuido bajo la licencia se distribuye de manera "como es", sin garantías o condiciones de ningún tipo, ya sea expresas o implícitas. Consulte la licencia para los permisos y limitaciones de rigor de idioma específico bajo la licencia.