Skip to content

Latest commit

 

History

History
115 lines (95 loc) · 5.13 KB

README.md

File metadata and controls

115 lines (95 loc) · 5.13 KB
Raw

curve-dsashboard

本项目是 curve 控制台的前端项目

  • 项目依赖
  • 如何安装和启动项目
  • 项目文件相关介绍
  • 如何开发本项目
  • 如何调试本项目

项目依赖和 vscode 插件

推荐安装的插件属于锦上添花，不安装也无妨

  • 项目依赖 node 17 及以上版本
  • 代码 formatter 工具 prettier: esbenp.prettier-vscode
  • 代码 lint 工具 ESLint: dbaeumer.vscode-eslint
  • postcss 语法高亮插件 cpylua.language-postcss和vunguyentuan.vscode-postcss
  • vue3 官方插件 volar Vue.volar和Vue.vscode-typescript-vue-plugin
  • 推荐安装 vue3 代码提示工具 hollowtree.vue-snippets
  • 推荐安装 ts 报错合理提示插件 mattpocock.ts-error-translator
  • 推荐安装 单词拼写检测插件 streetsidesoftware.code-spell-checker
  • 推荐安装 色值显示插件 naumovs.color-highlight
  • 推荐安装 彩虹缩进插件 oderwat.indent-rainbow
  • 推荐安装 图片侧边预览插件 kisstkondoros.vscode-gutter-preview
  • 推荐安装 文件图标主题库 PKief.material-icon-theme
  • 推荐安装 TODO 高亮插件 wayou.vscode-todo-highlight

安装完插件以后打开 vscode 配置文件，添加如下配置：

  "editor.codeActionsOnSave": {// 保存时触发eslint fix
    "source.fixAll.eslint": true
  },

  "emmet.includeLanguages": {
    // 使用postcss来解析css,要安装postcss language support插件,启用 Emmet 缩写扩展
    "postcss": "css",
  },

  // prettier配置
  "prettier.useEditorConfig": false, // 不被editorconfig影响

  // 关于format的配置
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

项目安装和启动

  • 执行 npm install 安装依赖
  • 执行 npm run dev 启动本地服务，端口号可以在vite.config.ts文件的 server 字段下添加 port 字段修改

项目文件相关介绍

  • .vscode 文件夹：vscode 部分插件配置
  • dist 文件夹： build命令打包出口文件夹
  • node_modules 文件夹： 三方依赖模块集合
  • public 文件夹： 公共文件，待补充
  • src 文件夹： 主要项目代码集合
    • api 文件夹
      • 具体 api 文件：通过@/utils/_fetch文件做数据请求，命名基本和路由保持一致
    • assets 文件夹：资源文件夹
    • components： 公共组件文件夹，简单组件可以是文件，如果复杂组件可以是文件夹
    • directives： 自定义指令文件夹
    • hooks： compositionApi 文件夹
    • i18n：多语言文件夹，目前支持中文和英文两种
    • layout：布局文件夹，应该要加入页面权限相关内容
    • router： 路由配置文件夹
    • store：pinia 仓库，模块数量和 api 保持一致
    • styles：公共样式文件夹，内部有公共样式和 css 变量
    • utils：工具文件夹
    • views：路由页面文件夹，嵌套结构尽量和路由保持一致
    • app.vue 文件：vue 根文件
    • main.ts：vite 打包入口文件，也是整个项目的入口文件
  • .env：环境配置文件，内部变量通过import.meta.env访问。具体参考 https://cn.vitejs.dev/guide/env-and-mode.html#env-files
  • .eslintrc.cjs: eslint 配置文件，详细规则通过rules配置即可。具体参考 https://eslint.org/
  • .gitignore：配置文件路径，以避免某些纯本地文件上传到仓库。值得注意的是如果该文件已经在仓库中了，那 gitignore 中的配置将失效，要先去仓库删除该文件。
  • .prettierrc.js：prettier 配置文件，内有详细注释
  • env.d.ts：env 字段类型文件
  • index.html：打包模板，可修改 title，添加静态资源等
  • package.json 和 package-lock.json：npm 包相关文件，控制 npm 包依赖和包版本依赖。
  • postcss.config.js：postcss 配置文件。具体参考 https://postcss.org/
  • tsconfig.config.json：ts 工程模块所以 ts 配置文件
  • tsconfig.json：ts 配置文件
  • vite.config.ts：vite 配置文件

如何开发本项目

  • 新建 store 和 api 文件时请执行npm run model指令，按照提示进行创建
  • 上述命令也可以创建 view 文件，文件会引入 store。并添加基础示例代码，但是路由配置需要自己添加
  • components 文件夹下组件 首字母大写
  • hooks 文件以 use 开头
  • directives 文件以 v 开头
  • store 和 api 有 global 文件，用来完善全局相关数据模型
  • 页面鉴权待补充，指令加路由钩子应该就可以了
  • 代理相关配置在vite.config.ts文件的 proxy 字段中，请求工具会根据当前环境自动拼接'/api'

开发建议

备忘