fit2cloud ui

Fit2cloud ui

L'interface utilisateur Fit2Cloud est une bibliothèque de composants VUE basée sur le développement secondaire de l'interface utilisateur des éléments, fournissant des composants, des filtres, des instructions, etc. couramment utilisés dans le développement de logiciels d'entreprise.

Installer

npm install fit2cloud-ui

L'interface utilisateur des éléments doit être installée lorsque vous l'utilisez

npm install element-ui

Parce que vous devez utiliser SCSS, vous devez installer SASS

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

Introduction complète

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

Présenter à la demande

Avec Babel-Plugin-Import, nous ne pouvons introduire que les composants requis pour atteindre le but de réduire la taille du projet.

Tout d'abord, installez Babel-Plugin-Composant:

npm install babel-plugin-import -D

Ensuite, écrivez ce qui suit dans 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` ;
        } ,
      } ,
    ] ,
  ]
}

Ensuite, certains composants peuvent être introduits, tels que la barre de recherche et la table, donc le contenu suivant doit être écrit dans 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 )
} ) ;

Internationalisation

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

Documentation des composants

Adresse du document: https://fit2cloud-ui.github.io/docs/

Remerciements

• Élément grâce à l'élément pour l'excellente bibliothèque de composants

Licence et droit d'auteur

Copyright (C) 2014-2024 Feizhiyun Fit2Cloud, tous droits réservés.

Licencié en vertu de la version 3 de la licence publique générale GNU (GPLV3) (la "licence"); Vous ne pouvez pas utiliser ce fichier sauf conforme à la licence. Vous pouvez obtenir une copie de la licence à

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

Sauf exiger la loi applicable ou convenu par écrit, les logiciels distribués en vertu de la licence sont distribués sur une base «tel quel», sans garantie ou conditions d'aucune sorte, expresse ou implicite. Voir la licence pour la langue spécifique régissant les autorisations et les limitations sous la licence.