fit2cloud ui

FIT2CLOUD UI

FIT2CLOUD UI is a Vue component library based on the secondary development of Element UI, providing components, filters, instructions, etc. commonly used in enterprise software development.

Install

npm install fit2cloud-ui

Element UI is required to be installed when using it

npm install element-ui

Because you need to use scss, you need to install sass

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

Complete introduction

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

Introduce on demand

With babel-plugin-import, we can only introduce the required components to achieve the purpose of reducing the size of the project.

First, install babel-plugin-component:

npm install babel-plugin-import -D

Then, write the following 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` ;
        } ,
      } ,
    ] ,
  ]
}

Next, some components can be introduced, such as SearchBar and Table, so the following content needs to be written in 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 )
} ) ;

Internationalization

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

Component Documentation

Document address: https://fit2cloud-ui.github.io/docs/

Acknowledgements

• Element Thanks to Element for the excellent component library

License & Copyright

Copyright (c) 2014-2024 Feizhiyun FIT2CLOUD, All rights reserved.

Licensed under The GNU General Public License version 3 (GPLv3) (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

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

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.