Vite + Vue 3 + typescript + tailwindcss

VSCode

• 推荐安装插件
  1. dbaeumer.vscode-eslint
  2. lokalise.i18n-ally
  3. esbenp.prettier-vscode
  4. bradlc.vscode-tailwindcss
  5. johnsoncodehk.volar
• 配置 File -> Preferences -> Settings -> Extensions -> Edit in settings.json -> 扩展 settings 加入以下配置

  "settings": {
    "editor.tabSize": 2,
    "prettier.requireConfig": true,
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "eslint.format.enable": true,
    "eslint.validate": ["javascript", "vue", "html"],
    "eslint.codeAction.showDocumentation": {
      "enable": true
    },
    "i18n-ally.localesPaths": ["src/locales/lang"],
    "i18n-ally.keystyle": "nested",
    "i18n-ally.sortKeys": true,
    "i18n-ally.namespace": true,
    "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
    "i18n-ally.enabledParsers": ["ts"],
    "i18n-ally.sourceLanguage": "en",
    "i18n-ally.enabledFrameworks": [
      "vue",
      "react"
    ],
    "tailwindCSS.rootFontSize": 14
  }

主要项目结构说明

• build
  • generate
    • generateModifyVars.ts 在这里可根据项目需求覆盖 antdv 对应的 less 变量，参照default.less
    • default.less antdv 所有 less 变量，与https://github.com/vueComponent/ant-design-vue/blob/next/components/style/themes/default.less对应
• src
  • api
    • aiot aiot应用所有接口定义
    • req axios 封装
    • account.ts 平台账号相关操作接口
    • curd.ts 增删查改接口统一封装
    • models.ts 接口共用类型定义
  • base
    • env.ts 所有环境变量
  • components
    • common 通用的跟业务无关的组件定义在此文件夹下
    • 根目录 公共业务组件
  • hooks 公共 hook
  • locales 国际化配置
  • router 路由配置
  • stores pinia 配置
  • style
    • common.less 公共样式
    • sl.less 根据申菱 UI 样式 重写对应 antd 组件的样式
  • types
    • antd.ts antdv 类型补充
    • common.ts 公共类型定义
    • components.ts 公共组件的部分类型定义
  • utils
  • views 页面定义

记录

• ant-design-vue 更新后，需要重新安装 dayjs，不然出现国际化问题
• components 目录下的组件不需额外引入，直接使用，但注意文件名字要唯一

其它

admin ggggggggggg 15916060098 13494609359

192.1.5.252 sl.aiot.com 192.1.5.252 sl.aiot.web.com 192.1.5.252 sl.argocd.com

2022-05-18