vwb-atomic-text

Features

• Auto Import

支持自动导入'react', 'react-i18next'等库

export default function Demo() {
  const [] = useState(0);
  const { t } = useTranslation();

  return <>{t('message.common.test')}</>;
}

• Icons

项目内置了 unplugin-icons, 请参考文档使用

所有 icon 支持自动导入,无需手动 import,依赖自动安装,类似如下方式直接使用即可:

在 https://icon-sets.iconify.design/ 可以直接搜索所有 icon 资源,antd 的 icon 也一样存在

更多用法参考 unplugin-icons 官方文档即可

export default function Demo() {
  return (
    <>
      <IconAntDesignSearchOutlined />
    </>
  );
}

• vite-plugin-svgr

import DemoIcon from '@/assets/svg/demo.svg';

export default function Demo() {
  return (
    <>
      <DemoIcon />
    </>
  );
}

• postcss & autoprefixer & tailwindcss

export default function Demo() {
  return (
    <>
      <p className="underline">Test</p>
    </>
  );
}

• Stores & Theme

创建 Store 参考: src/stores/theme.store.ts,然后在 src/stores/store.tsx 内使用

组件用法示例:

import { ThemeContext, useThemeStore } from '@/stores';

export default function Demo() {
  const { theme } = useContext(ThemeContext);
  const { getThemeInstance } = useThemeStore();

  function toggleTheme(themeKey: string) {
    getThemeInstance().toggle(themeKey);
  }

  return (
    <>
      当前主题: {theme}
      <button onClick={() => toggleTheme('default')} type="button">
        切换默认主题
      </button>
      <br />
      <button onClick={() => toggleTheme('light')} type="button">
        切换亮色主题
      </button>
      <br />
      <button onClick={() => toggleTheme('dark')} type="button">
        切换暗黑主题
      </button>
    </>
  );
}

• Base Styles & BEM.scss

全局样式src/assets/styles/global.scss

默认导入所有样式表顶部src/assets/styles/base/variables.scss,并导入 bem.scss,domain 前缀可通过 variables.scss 内变量修改

@include b(demo) {
  // .cp-demo
  color: red;
  height: 2000px;
  @include e(element) {
    // .cp-demo__element
    @include m(modify) {
      // .cp-demo__element_modify
    }
  }
}

• I18n

export default function Demo() {
  const { t, i18n } = useTranslation();
  function toggleLang(lang: string) {
    i18n.changeLanguage(lang);
  }
  return (
    <>
      当前语言环境: {i18n.language}
      {t('message.common.test')}
      <button onClick={() => toggleLang('en')} type="button">
        使用英语
      </button>
      <br />
      <button onClick={() => toggleLang('zh-CN')} type="button">
        使用中文
      </button>
    </>
  );
}

• Eslint

使用 Airbnb Eslint 规则

npm run lint 执行检查

• Prettier

npm run format 执行检查