fit2cloud ui

FIT2CLOUD UI

FIT2CLOUD UI 是基於Element UI二次開發的Vue組件庫，提供企業軟件開發時常用的組件，過濾器，指令等

安裝

npm install fit2cloud-ui

使用時需要安裝Element UI

npm install element-ui

因為需要使用scss，所以需要安裝sass

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

完整引入

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

按需引入

借助babel-plugin-import，我們可以只引入需要的組件，以達到減小項目體積的目的。

首先，安裝babel-plugin-component：

npm install babel-plugin-import -D

然後，在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` ;
        } ,
      } ,
    ] ,
  ]
}

接下來，就可以引入部分組件，比如SearchBar 和Table，那麼需要在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 )
} ) ;

國際化

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

組件文檔

文檔地址：https://fit2cloud-ui.github.io/docs/

致謝

• Element 感謝Element 提供的優秀組件庫

License & Copyright

Copyright (c) 2014-2024 飛致雲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.