vue-vite-template

  基于vite、vue3

  集成vue-router、vueuse、pinia、typescript、mockjs

  集成ESlint、Prettie、Stylelint代码规范工具。

  集成commitlint git信息提交规范工具

  集成国际化vue-i18n

  集成主题切换功能(cssVar)

  集成多种动态svg图标使用：封装SvgIcon组件、集成unplugin-icons

  main/master: 用于基础功能开发
  element-template: 集成element-plus
  antd-template: 集成ant-design-vue
  *-scope: 用于cli工具模板生成

pnpm install

pnpm run dev

pnpm run build

pnpm run lint

  1. 下载svg文件，并存放在src/assets/svgs目录下(该项目指定在此目录，可以在vite.config.js文件中进行修改)

  2. 使用: i-sy-{{svgName}}
    <!-- i 及 sy (前缀名)均可在vite.config.js进行修改，根据个人喜好设置(具体请查看使用说明:https://github.com/antfu/unplugin-icons) -->
    <i-sy-vue />

  项目中引入的图集unplugin-icons会自动进行安装，可直接使用

  1. 在官方网站找到想用的图标

  2. 复制图集及icon名, 例： clarity:accessibility-1-solid; 图集为clarity，图标名为accessibility-1-solid
  <i-clarity:accessibility-1-solid/>
  or
  <i-clarity-accessibility-1-solid/>

  // 动态使用的svg存放在src/assets/svgs 目录下。根据svg图标名传入相应的参数, 同时支持修改图标颜色(修改颜色前请先删除svg代码里的fill属性，否则color属性将失效)。例:
  <svg-icon name="vue" style="color: #f60" />