React + vite + TypeScript

建構指令

Install

yarn install

Run

yarn run dev

Build

yarn build

Test

yarn test

專案 Import Alias

'@': 'src'
'@pages':'src/pages'
'@assets':'src/assets',
'@comps': 'src/components',
'@utils': 'src/utils',
'@router': 'src/router',
'@store': 'src/store',
'@css': 'src/css',
'@tools: 'src/tools'

多國語言 i18n

// 增加語言路徑 ：src/config/i18n/langs 組件使用
import { useSelector } from "react-redux";
import { selectTranslations } from '@/store/slice/i18nSlice'
// ...
const t = useSelector(selectTranslations);

Dark模式

// 取得當前模式
組件使用
import { useSelector } from "react-redux";
import { theme } from '@/store/slice/themeSlice'
// ...
const darkMode = useSelector( theme );
====================Css Mode用法====================
引入：
@import "@/css/variable.scss";
在 /src/css/variable.scss 中 會有兩個 @mixin 分別加入需要對應樣式 加上參數
@mixin light {
...(省略)
--test-background: blue;
}
@mixin dark {
...(省略)
--test-background: red;
}
使用：
@import "@/css/variable.scss";
.test-class {
background-color: var(--test-background);
}
====================Global Class 用法====================
路徑如下：
Dark: src/css/theme/dark.scss
Light: src/css/theme/light.scss
直接新增class name 便可在全局使用

Svg組件

參考網址

name	type	default	use
iconName	string	''	路徑 /src/icons/svg/ 底下的 file name
wrapperStyle	string	''	svg 的 Class Name
svgProp	Object<React.SVGProps	{}	Object參數 width、height、fill
darkTheme	Boolean or String	false	如果為參數true svg顏色會跟著預設dark模式去改變顏色

SVG範例

基本使用

組件使用：
將svg圖檔放入 /src/icons/svg/icon1
引入：
import SvgIcon from "@/tools/SvgIcon/index";
使用：
<SvgIcon iconName='icon1' />
層級資料夾使用
將svg圖檔放入 /src/icons/svg/dir/icon2
<SvgIcon iconName='dir-icon2' />

顏色變化 （注意：若svg有多個色碼存在時,將無法改變顏色,為預防不必要錯誤）

<!-- svgProp 中帶入fill色碼即可改變svg顏色 --!>
<SvgIcon iconName='icon1' svgProp={{ fill: '#000' }} />
<!-- svgProp Dark 模式 當 darkTheme 給予值為true時會優先以 darkTheme 來去給值 --!>
<SvgIcon iconName='icon1' svgProp={{ fill: '#000' }}
darkTheme={ true } />
<!-- darkTheme 按需改變 當不想依照store給定預設顏色時,可輸入dark以及 light 兩者分開則用用豎線分開--!>
<!-- 前方為Dark色碼,後方為Light色碼 --!>
<SvgIcon iconName='icon1' svgProp={{ fill: '#000' }}
darkTheme={ "#1da7da|#e3e6e8" } />