fit2cloud ui

fit2cloud ui

Fit2Cloud UI เป็นไลบรารี Vue Component ตามการพัฒนารองของ Element UI โดยให้ส่วนประกอบตัวกรองคำแนะนำ ฯลฯ ที่ใช้กันทั่วไปในการพัฒนาซอฟต์แวร์องค์กร

ติดตั้ง

npm install fit2cloud-ui

ต้องติดตั้งองค์ประกอบ 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:

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/

กิตติกรรมประกาศ

• องค์ประกอบขอบคุณองค์ประกอบสำหรับไลบรารีส่วนประกอบที่ยอดเยี่ยม

ใบอนุญาตและลิขสิทธิ์

ลิขสิทธิ์ (c) 2014-2024 Feizhiyun Fit2Cloud สงวนลิขสิทธิ์

ได้รับใบอนุญาตภายใต้ใบอนุญาตสาธารณะ GNU ทั่วไปเวอร์ชัน 3 (GPLV3) ("ใบอนุญาต"); คุณไม่สามารถใช้ไฟล์นี้ยกเว้นตามใบอนุญาต คุณอาจได้รับสำเนาใบอนุญาตที่

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

เว้นแต่ว่ากฎหมายที่บังคับใช้หรือตกลงเป็นลายลักษณ์อักษรซอฟต์แวร์ที่แจกจ่ายภายใต้ใบอนุญาตจะถูกแจกจ่ายตาม "ตามพื้นฐาน" โดยไม่มีการรับประกันหรือเงื่อนไขใด ๆ ไม่ว่าจะโดยชัดแจ้งหรือโดยนัย ดูใบอนุญาตสำหรับภาษาเฉพาะที่ควบคุมการอนุญาตและข้อ จำกัด ภายใต้ใบอนุญาต