{"id":21625952,"url":"https://github.com/debbl/cms-vue3-ts-vite","last_synced_at":"2026-04-11T09:03:26.442Z","repository":{"id":62630268,"uuid":"527137196","full_name":"Debbl/cms-vue3-ts-vite","owner":"Debbl","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-07T06:14:55.000Z","size":526,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-24T22:41:40.551Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"cms-vue3-ts-vite.vercel.app","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Debbl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-21T07:35:21.000Z","updated_at":"2022-11-03T06:56:23.000Z","dependencies_parsed_at":"2024-11-25T01:11:29.694Z","dependency_job_id":"e863481a-7c91-4704-9ad8-dc86b45d8323","html_url":"https://github.com/Debbl/cms-vue3-ts-vite","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debbl%2Fcms-vue3-ts-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debbl%2Fcms-vue3-ts-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debbl%2Fcms-vue3-ts-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debbl%2Fcms-vue3-ts-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Debbl","download_url":"https://codeload.github.com/Debbl/cms-vue3-ts-vite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244297871,"owners_count":20430347,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T01:11:26.867Z","updated_at":"2026-04-11T09:03:26.400Z","avatar_url":"https://github.com/Debbl.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"src/assets/img/logo.svg\" width=\"100\"\u003e\n\u003c/p\u003e\n\n# 1. 项目搭建\n\n## 1.1 使用`create-vite` 创建项目\n\n- vue+ts\n\n## 1.2 不同 IDE 同步代码风格 `.editorconfig`\n\n```yaml\n# EditorConfig is awesome: https://EditorConfig.org\n\n# top-most EditorConfig file\n\n# EditorConfig is awesome: https://EditorConfig.org\n\n# top-most EditorConfig file\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n```\n\n## 1.3 ESLint 和 Perttier\n\n### ESLint\n\n- `pnpm i eslint -D`\n- `npx eslint --init`\n\n### Prettier\n\n- `pnpm i prettier -D`\n\n```js\n// .prettierrc.cjs\nmodule.exports = {\n  useTabs: false, // tab 还是 空格\n  tabWidth: 2, // tab 的宽度\n  printWidth: 80, // 每行的最大字符数\n  singleQuote: true, // 单引号\n  trailingComma: \"es5\", // 末尾是否有逗号\n  semi: true, // 是否使用分号\n};\n```\n\n### ESLint Prettier\n\n- `pnpm i eslint-config-prettier -D`\n- `pnpm i eslint-plugin-prettier -D`\n\n```js\n// .eslintrc.cjs\nmodule.exports = {\n  env: {\n    browser: true,\n    es2021: true,\n    node: true,\n  },\n  extends: [\n    \"eslint:recommended\",\n    \"plugin:vue/vue3-essential\",\n    \"plugin:@typescript-eslint/recommended\",\n    \"plugin:prettier/recommended\",\n  ],\n  overrides: [],\n  parser: \"vue-eslint-parser\",\n  parserOptions: {\n    ecmaVersion: \"latest\",\n    parser: \"@typescript-eslint/parser\",\n    sourceType: \"module\",\n  },\n  plugins: [\"vue\", \"@typescript-eslint\"],\n  rules: {\n    \"prettier/prettier\": \"warn\",\n  },\n};\n```\n\n### ESLint + Vite\n\n- `pnpm i vite-plugin-eslint -D`\n\n```ts\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\nimport eslint from \"vite-plugin-eslint\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [vue(), eslint()],\n});\n```\n\n# 2. 技术栈集成\n\n## 2.1 vue-router\n\n\u003e 路由管理\n\n- 按组件分块（动态加载组件）\n\n```js\nconst Home = () =\u003e import(\"@/views/Home.vue\");\nconst About = () =\u003e import(\"@/views/About.vue\");\n```\n\n## 2.1 pinia\n\n\u003e 状态管理\n\n- 按不同的数据分类放入`modules`文件夹中\n\n## 2.3 UI 组件库 element-plus\n\n- 组件使用手动导入，可以清楚的看到使用了那些组件\n- 样式按需导入使用 `unplugin-element-plus` vite 插件\n\n## 2.4 axios 集成和封装\n\n- 封装 `axios`在`services/request` ,代理全局的请求，可以方便的自定义请求配置，方便更换请求库\n- 按请求的数据类型分类放在 `services/modules/*`下\n\n- `.env.[mode]` 区分不同的环境\n\n- 封装多级拦截器\n\n- loading 动画的显示\n\n# 3. 初始化\n\n## 3.1 CSS 重置\n\n- normalize.css\n- @/assets/css/reset.less\n\n# 4. 基本功能\n\n## 4.1 登录\n\n- 登录验证，获取 token\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebbl%2Fcms-vue3-ts-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdebbl%2Fcms-vue3-ts-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebbl%2Fcms-vue3-ts-vite/lists"}