1.2.1

快速上手

FIT2CLOUD UI PLUS是基于Element Plus二次开发的Vue 3组件库,提供企业软件开发时常用的组件

安装

推荐使用 npm 的方式安装

npm install fit2cloud-ui-plus

使用时需要安装Element Plus

npm install element-plus --save

因为需要使用scss,所以需要安装sass

npm install -D sass sass-loader

如果使用element plus的icon,根据element plus文档安装

npm install @element-plus/icons-vue

完整引入

在 main.js 中写入以下内容:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import Fit2CloudPlus from 'fit2cloud-ui-plus';
import "fit2cloud-ui-plus/src/styles/index.scss"; // 已经包含了element plus的scss

import * as ElementPlusIconsVue from '@element-plus/icons-vue' // element plus的icon需要另安装

const app = createApp(App)
app.use(ElementPlus)
app.use(Fit2CloudPlus)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')

使用规范样式

创建一个index.scss文件,并写入:

@use "fit2cloud-ui-plus/src/styles/themes/default.scss";
@use "fit2cloud-ui-plus/src/styles/index.scss";

在 main.js 中引入index.scss:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import Fit2CloudPlus from 'fit2cloud-ui-plus';
import "./index.scss";

import * as ElementPlusIconsVue from '@element-plus/icons-vue' // element plus的icon需要另安装

const app = createApp(App)
app.use(ElementPlus)
app.use(Fit2CloudPlus)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')

自定义样式

创建一个theme.scss文件,参考fit2cloud-ui-plus/src/styles/themes/default.scss进行自定义变量,例如:

@forward "fit2cloud-ui-plus/src/styles/common/variables.scss" with (
  $fu-filter-bar: (
    'color': #646A73,
    'drawer-color': #646A73,
    'condition-color': #0C296E,
    'condition-bgColor': #3370FF19,
    'option-bgColor': #F5F6F7,
    'option-hover-bgColor': #3370FF19,
    'scroll-bgColor': #1F232919
  ),
  $fu-icon-button: (
    'color': #1F2329,
  )
);

然后创建index.scss,并写入:

@use "./theme.scss";
@use "fit2cloud-ui-plus/src/styles/index.scss";

在 main.js 中引入index.scss:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import Fit2CloudPlus from 'fit2cloud-ui-plus';
import "./index.scss";

import * as ElementPlusIconsVue from '@element-plus/icons-vue' // element plus的icon需要另安装

const app = createApp(App)
app.use(ElementPlus)
app.use(Fit2CloudPlus)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#app')

国际化

创建国际化文件,例如:

// locale/lang/zh.ts
import fit2cloudLocale from 'fit2cloud-ui-plus/src/locale/lang/ru'

const message = {
  home: "首页",
  ...
}

export default {
  ...fit2cloudLocale,
  ...message
};

初始化 i18n ,例如:创建 locale/index.ts 文件:

import {createI18n} from 'vue-i18n';
import zh from './locale/lang/zh';
import en from './locale/lang/en';

const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('lang') || 'zh',
  fallbackLocale: 'zh',
  globalInjection: true,
  messages: {
    zh,
    en
  },
  warnHtmlMessage: false,
});

export default i18n;

在 main.ts 中引入翻译的方法, 例如:

import i18n from './locale'

const options = {size: 'default', zIndex: 3000, i18n: i18n.global.t}
app.use(Fit2CloudPlus, options);