fit2cloud ui

Fit2Cloud UI

O FIT2Cloud UI é uma biblioteca de componentes VUE com base no desenvolvimento secundário da interface do usuário do elemento, fornecendo componentes, filtros, instruções etc. comumente usados no desenvolvimento de software corporativo.

Instalar

npm install fit2cloud-ui

Ui do elemento deve ser instalado ao usá -lo

npm install element-ui

Porque você precisa usar o SCSS, você precisa instalar o SASS

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

Introdução 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 )
} ) ;

Apresentar sob demanda

Com Babel-Plugin-Import, só podemos introduzir os componentes necessários para alcançar o objetivo de reduzir o tamanho do projeto.

Primeiro, instale Babel-Plugin-Component:

npm install babel-plugin-import -D

Em seguida, escreva o seguinte em 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` ;
        } ,
      } ,
    ] ,
  ]
}

Em seguida, alguns componentes podem ser introduzidos, como o SearchBar e a tabela, portanto o conteúdo a seguir precisa ser escrito em 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 )
} ) ;

Internacionalização

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

Documentação do componente

Endereço do documento: https://fit2cloud-ui.github.io/docs/

Agradecimentos

• Elemento graças ao elemento pela excelente biblioteca de componentes

Licença e direitos autorais

Copyright (c) 2014-2024 Feizhiyun Fit2Cloud, todos os direitos reservados.

Licenciado sob a licença pública geral da GNU versão 3 (GPLV3) (a "licença"); Você não pode usar esse arquivo, exceto em conformidade com a licença. Você pode obter uma cópia da licença em

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

A menos que exigido pela lei aplicável ou acordada por escrito, o software distribuído sob a licença é distribuído "como está", sem garantias ou condições de qualquer tipo, expressa ou implícita. Consulte a licença para o idioma específico que rege as permissões e limitações sob a licença.