Skip to content

opencurve/curve-dashboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

curve-dsashboard

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

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

项目依赖和 vscode 插件

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

  • 项目依赖 node 17 及以上版本
  • 代码 formatter 工具 prettier: esbenp.prettier-vscode
  • 代码 lint 工具 ESLint: dbaeumer.vscode-eslint
  • postcss 语法高亮插件 cpylua.language-postcssvunguyentuan.vscode-postcss
  • vue3 官方插件 volar Vue.volarVue.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'

开发建议

备忘