{"id":20105977,"url":"https://github.com/markthree/tov-template-with-element-plus","last_synced_at":"2025-07-09T16:31:43.699Z","repository":{"id":135417692,"uuid":"463520091","full_name":"markthree/tov-template-with-element-plus","owner":"markthree","description":"由 tov-template 生成，但更专注 element-plus","archived":false,"fork":false,"pushed_at":"2022-02-26T05:40:11.000Z","size":1028,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-06T09:46:17.431Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markthree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-02-25T12:14:40.000Z","updated_at":"2023-04-13T11:34:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"7bf36afe-bd1f-4abc-a61d-3763be0c9747","html_url":"https://github.com/markthree/tov-template-with-element-plus","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":"dishait/tov-template","purl":"pkg:github/markthree/tov-template-with-element-plus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markthree%2Ftov-template-with-element-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markthree%2Ftov-template-with-element-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markthree%2Ftov-template-with-element-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markthree%2Ftov-template-with-element-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markthree","download_url":"https://codeload.github.com/markthree/tov-template-with-element-plus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markthree%2Ftov-template-with-element-plus/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264494759,"owners_count":23617442,"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-13T17:48:45.902Z","updated_at":"2025-07-09T16:31:43.580Z","avatar_url":"https://github.com/markthree.png","language":"TypeScript","readme":"# tov-template-wite-element-plus\n\n一个 ` vite + vue3 + ts ` 开箱即用现代开发模板，但更专注 `element-plus`。\n\n\u003e 该仓库更新是不及时的，更新更及时的工程化集成可见 👉 [tov-template](https://github.com/dishait/tov-template)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 特点 🐳\n\n1. Vite 的\n2. Vue3 的\n3. 文件路由\n4. 布局系统\n5.  Mock 支持\n6. Api 自动引入\n7. 组件自动引入\n8. 图标自动引入\n9.  VueUse 支持\n10. TypeScript 的\n11. Windi CSS 的\n12. 暗黑模式支持\n13. SWR 请求支持\n14. pinia 状态管理\n15. pnpm 包管理器\n16. 跳转进度条支持\n17. Inspect 调试支持\n18. 插件自动加载支持\n19. Vitest 单元测试支持\n20. 支持 Markdown 渲染\n21. 路径别名 `~` 支持\n22. 命令行自动创建与删除\n23. i18n 国际化支持\n24. 漂亮的 404页 支持\n25. tsx 支持\n26. gzip 资源压缩支持\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## `node` 版本推荐 🐎\n\n因为该模板完全面向现代，所以推荐大家使用 `node` 当前的长期维护版本 `v16`， 大于 `v16.13.1` 即可。\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 使用 🐂\n\n\u003e 该模板不限定大家使用某一特定的包管理器，npm，yarn 和 pnpm 都行。同时注意 npm 的版本应该尽量的新。\n\n强烈推荐大家使用更快更合理的 `pnpm` 包管理器 👉 [安装教程](https://pnpm.io/zh/installation)\n\n1. 安装依赖\n```shell\npnpm install\n\n# 或者 npm install\n# 或者 yarn\n```\n\n2. 开发\n```shell\npnpm dev \n\n# 或者 npm run dev\n# 或者 yarn dev\n\n# 开启 host\npnpm dev:host  \n\n# 或者 npm run dev:host \n# 或者 yarn dev:host\n\n# 自动打开浏览器\npnpm dev:open\n\n# 或者 npm run dev:open\n# 或者 yarn dev:open\n```\n\n3. 预览\n```shell\npnpm preview\n\n# 或者 npm run preview\n# 或者 yarn preview\n\n# 开启 host\npnpm preview:host\n\n# 或者 npm run preview:host\n# 或者 yarn preview:host\n\n# 自动打开浏览器\npnpm preview:open\n\n# 或者 npm run preview:open\n# 或者 yarn preview:open\n```\n\n4. 打包\n\n```shell\npnpm build\n\n# 或者 npm run build\n# 或者 yarn build\n```\n\n5. 单元测试\n```shell\npnpm test\n\n# 或者 npm run test\n# 或者 yarn test\n```\n\n6. 单元测试报告生成\n```shell\npnpm coverage\n\n# 或者 npm run coverage\n# 或者 yarn coverage\n```\n\n7. 样式报告预览\n```shell\npnpm analysis\n\n# 或者 npm run analysis\n# 或者 yarn analysis\n```\n\n8. 样式报告打包\n```shell\npnpm analysis:build\n\n# 或者 npm run analysis:build\n# 或者 yarn analysis:build\n```\n\n9. 类型检查\n```shell\npnpm typecheck\n\n# 或者 npm run typecheck\n# 或者 yarn typecheck\n```\n\n10. 自动创建\n```shell\npnpm auto:create\n\n# 或者 npm run auto:create\n# 或者 yarn auto:create\n```\n\n11. 自动移除\n\n```shell\npnpm auto:remove\n\n# 或者 npm run auto:remove\n# 或者 yarn auto:remove\n```\n\n12. 依赖更新\n\n```shell\n# 安全版本更新\npnpm deps:fresh\n\n# 或者 npm run deps:fresh\n# 或者 yarn deps:fresh\n\n# 主版本更新，可能是破坏性更新，谨慎使用，做好测试\npnpm deps:fresh:major\n\n# 或者 npm run deps:fresh:major\n# 或者 yarn deps:fresh:major\n\n# 次版本更新，可能是破坏性更新，谨慎使用，做好测试\npnpm deps:fresh:minor\n\n# 或者 npm run deps:fresh:minor\n# 或者 yarn deps:fresh:minor\n\n# 补丁版本更新\npnpm deps:fresh:patch\n\n# 或者 npm run deps:fresh:patch\n# 或者 yarn deps:fresh:patch\n```\n```shell\n# 以上命令仅对包信息 package.json 进行写入，需要重新执行包安装命令\npnpm i\n\n# 或者 npm i\n# 或者 yarn\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n## 动机 🐗\n\n为什么要做这个 **模板** 呢？\n\n1. 为下次开发节省浪费在配置上的时间\n2. 结合主流插件整合现代开发架构，提高开发效率\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 使用场景 🐻\n\n什么时候你应该用? \n\n1. 不想浪费时间在项目配置上\n2. 希望尝试用更现代的方式开发 `web` 应用，提高开发效率\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 启发 🐃\n\n该模板受 **[vitesse](https://github.com/antfu/vitesse)** 启发，如果你有 SSG 的场景，那么推荐你始终使用 **[vitesse](https://github.com/antfu/vitesse)**。\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n\n## 组织 🦔\n\n欢迎关注 **帝莎编程**\n- [官网](http://dishaxy.dishait.cn/)\n- [Gitee](https://gitee.com/dishait)\n\n- [Github](https://github.com/dishait)\n\n- [网易云课堂](https://study.163.com/provider/480000001892585/index.htm?share=2\u0026shareId=480000001892585)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n## 详情 🐳\n\n### [1. Vite 的](https://cn.vitejs.dev/)\n\n该模板采用 **[vite](https://cn.vitejs.dev/)** 作为构建工具，你可以在根目录下的 `vite.config.ts` 对项目的构建进行配置。  \n\n对于众多主流插件的引入和繁杂配置已经整合到根目录下的预设 `presets` 中，大多数情况下你是不需要重新对它们进行配置的。\n\n\u003cbr /\u003e\n\n### [2. Vue3 的](https://v3.cn.vuejs.org/)\n\n\u003cbr /\u003e\n\n### [3. 文件路由](https://github.com/hannoeru/vite-plugin-pages)\n\n目录结构即路由。\n\neg: \n- `src/pages/index.vue` =\u003e `/`\n- `src/pages/about.vue` =\u003e `/about`\n- `src/pages/users/index.vue` =\u003e `/users`\n- `src/pages/users/profile.vue` =\u003e `/users/profile`\n- `src/pages/users/[id].vue` =\u003e `/users/:id`\n- `src/pages/[user]/settings.vue` =\u003e `/:user/settings`\n-  `src/pages/[...notFound].vue` =\u003e 404 路由\n\n具体可见 👉 [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages#file-system-routing)\n\n\u003cbr /\u003e\n\n### [4. 布局系统](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)\n\n#### 默认布局\n\n\n`src/layouts/default.vue` 将作为默认布局。\n```html\n\u003c!-- src/layouts/default.vue --\u003e\n\u003ctemplate\u003e\n    我是默认布局\n    \u003crouter-view /\u003e \u003c!-- 页面视图出口 --\u003e\n\u003c/template\u003e\n```\n\n此时 `src/pages/index.vue` \n```html\n\u003c!-- src/pages/index.vue --\u003e\n\u003ctemplate\u003e\n    \u003cdiv\u003e我是首页\u003c/div\u003e \n\u003c/template\u003e\n``` \n路由到 `/`时，页面将渲染\n```html\n我是默认布局\n我是首页\n```\n此时 `src/pages/about.vue`\n```html\n\u003c!-- src/pages/about.vue --\u003e\n\u003ctemplate\u003e\n    \u003cdiv\u003e我是关于页\u003c/div\u003e \n\u003c/template\u003e\n```\n路由到 `/about` 时，页面将渲染\n```html\n我是默认布局\n我是关于页\n```\n\n\u003cbr /\u003e\n\n#### 非默认布局\n随便创建一个 `src/layouts/custom.vue`\n```html\n\u003c!-- src/layouts/custom.vue --\u003e\n\u003ctemplate\u003e\n    我是非默认布局custom\n    \u003crouter-view /\u003e \u003c!-- 页面视图出口 --\u003e\n\u003c/template\u003e\n```\n\n此时 `src/pages/index.vue` 内\n\n```html\n\u003c!-- src/pages/index.vue --\u003e\n\u003ctemplate\u003e\n    \u003cdiv\u003e我是首页\u003c/div\u003e \n\u003c/template\u003e\n\n\u003c!-- 添加自定义块 👇 --\u003e\n\u003croute lang=\"yaml\"\u003e\nmeta:\n  layout: custom\n\u003c/route\u003e\n```\n此时路由到 `/`, 页面将渲染\n\n```html\n我是非默认布局custom\n我是首页\n```\n\n具体可见 👉 [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts#overview) \n\n\u003cbr /\u003e\n\n### [5. Mock 支持](https://github.com/vbenjs/vite-plugin-mock)\n\n在根目录下的 `mock` 目录下，可以在模块中导出默认的 `api` 资源。\n\n例如 `mock/test.ts` 内导出\n```ts\nimport { MockMethod } from 'vite-plugin-mock'\nexport default [\n    {\n        url: '/api/get',\n        method: 'get',\n        response: () =\u003e {\n            return {\n                code: 0,\n                data: {\n                    name: 'vben'\n                }\n            }\n        }\n    }\n] as MockMethod[]\n```\n在 `src` 中就可以进行模拟请求。\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n    import { useRequest } from \"vue-request\"\n    // 请求接口 /api/get\n    const { data, loading, error } = useRequest('/api/get') \n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv\u003edata: {{data}}\u003c/div\u003e\n    \u003cdiv\u003eloading: {{loading}}\u003c/div\u003e\n    \u003cdiv\u003eerror: {{error}}\u003c/div\u003e\n\u003c/template\u003e\n```\n\n这里用到 [vue-request](https://cn.attojs.org/) 去做请求，不过因为该 `mock` 拦截的是一整个接口，所以换成 `axios` 等请求库也是可以的。  \n\n更多 `mock` 设置可见 👉 [vite-plugin-mock](https://github.com/vbenjs/vite-plugin-mock)\n\n\u003cbr /\u003e\n\n### [6. Api 自动引入](https://github.com/antfu/unplugin-auto-import)\n\n原本 `vue` 的 `api` 需要自行 `import`。\n```ts\nimport { ref, computed } from 'vue'\nconst count = ref(0)\nconst doubled = computed(() =\u003e count.value * 2)\n```\n现在可以直接使用。\n```ts\nconst count = ref(0)\nconst doubled = computed(() =\u003e count.value * 2)\n```\n而且上边的 `api` 是按需自动引入的。\n\n目前模板支持自动引入 `api` 的库列表包括:\n1. vue\n2. pinia\n3. vueuse\n4. vue-i18n\n5. vue-router\n\n当然还有项目中的自动引入，只需要满足以下规范即可。\n\n1. `src/composables` 下凡是 `use` 开头的模块，同时里边有 `default` 导出，该导出就可以被按需自动引入。\n\n例如有个 `src/composables/foo.ts`\n\n```ts\n// default 导出\nexport default 1000\n```\n\n此时就不再需要 `import`了\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n    console.log(foo) // 输出 1000\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv @click=\"store.inc()\"\u003e{{store.counter}}\u003c/div\u003e\n\u003c/template\u003e\n```\n\n2. `src/stores` 下凡是 `Store` 结尾的模块，同时里边有 `default` 导出，该导出就可以按需自动引入。\n\n例如有个 `src/stores/counterStore.ts`\n\n```ts\n// default 导出\nexport default defineStore('counter', {\n    state() {\n        return {\n            counter: 1\n        }\n    },\n    actions: {\n        inc() {\n            this.counter++\n        }\n    }\n})\n```\n此时就不再需要 `import`了\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n    const store = counterStore()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv @click=\"store.inc()\"\u003e{{store.counter}}\u003c/div\u003e\n\u003c/template\u003e\n```\n\n具体可见 👉 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) 与 [vite-auto-import-resolvers](https://github.com/dishait/vite-auto-import-resolvers)\n\n\u003cbr /\u003e\n\n### [7. 组件自动引入](https://github.com/antfu/unplugin-auto-import)\n\n原来需要 `import`\n```html\n\u003c!-- src/pages/index.vue --\u003e\n\u003cscript setup lang=\"ts\"\u003e\n    import Hello from \"../components/Hello.vue\"\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cHello /\u003e\n\u003c/template\u003e\n```\n\n现在只要在 `src/components` 下定义的组件都将会按需引入，即 `import` 是不需要的。\n\n```html\n\u003c!-- src/pages/index.vue --\u003e\n\u003ctemplate\u003e\n    \u003cHello /\u003e\n\u003c/template\u003e\n```\n\n\u003cbr /\u003e\n\n### [8. 图标自动引入](https://github.com/antfu/unplugin-auto-import)\n\n可前往 👉 [icones](https://icones.netlify.app/)，随意选择点击进入其中一个图标库\n\n![icons-first-step](public/docs/icons-first-step.png)\n\n再点击选择其中一个喜欢的图标\n\n![icons-second-step](public/docs/icons-second-step.png)\n\n复制其名称\n\n![icons-second-step](public/docs/icons-third-step.png)\n\n在模板中即可直接用组件的形式直接使用，注意加上前缀 `i-`。\n\n```html\n\u003ctemplate\u003e\n    \u003ci-mdi:account-box-multiple /\u003e\n\u003c/template\u003e\n```\n\n保存后等待自动下载该图标库后，就可以在页面中看到对应图标。  \n\n注意自动下载图标需要 `pnpm` 包管理器支持，如果你是其他包管理器需要手动安装图标集 👇👇👇\n\n图标集名称为 `@iconify/` 加 `:` 前缀，例如上边的图标是 `mdi:account-box-multiple`，图标集名称就为 `@iconify/mdi`。\n\n```shell\nnpm i @iconify/mdi -D\n\n# 或者 yarn add @iconify/mdi -D\n```\n\n\n同时推荐你使用 `vscode` 插件 [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)。  \n\n该插件会在模板中显示图标的预览。就像这样 👇\n\n```html\n\u003c!-- 模板中代码 --\u003e\n\u003ctemplate\u003e\n    \u003ci-mdi:account-box-multiple /\u003e\n\u003c/template\u003e\n```\n将在 `vscode` 中得到图标预览\n\n![icons-preview](public/docs/icons-preview.png)\n\n具体可见 👉 [unplugin-icons](https://github.com/antfu/unplugin-icons)\n\n\n\u003cbr /\u003e\n\n### [9. VueUse 支持](https://vueuse.org/)\n\n`VueUse` 是一个超级强的 `hooks` 库，例如你要获取鼠标位置，只需要这样 👇\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n    // useMouse 被自动按需引入了，不需要import\n    const { x, y } = useMouse()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv\u003ex坐标 {{x}}\u003c/div\u003e\n    \u003cdiv\u003ey坐标 {{y}}\u003c/div\u003e\n\u003c/template\u003e\n```\n\n具体可见 👉 [VueUse](https://vueuse.org/)\n\n\n\u003cbr /\u003e\n\n### [10. TypeScript 的](https://www.tslang.cn/)\n\n不需要重新配置，直接用 `ts` 书写就行了。\n\n\n\u003cbr /\u003e\n\n### [11. Windi CSS 的](https://cn.windicss.org/)\n\n`Windi CSS` 是一个开发中速度更快的 `原子css` 库。\n\n直接在模板中用就行了，不需要配置。\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv class=\"bg-red-500 text-white\"\u003e\n        我是红色背景的白色文本\n    \u003c/div\u003e\n\u003ctemplate\u003e\n```\n上述模板将渲染红色背景白色的字。\n\n同时支持 [属性化模式](https://cn.windicss.org/features/attributify.html#attributify-mode)，即可以用简写。该功能默认关闭，可在 `windi.config.ts` 中 设置 `attributify` 为 `true` 开启。 \n\n```html\n\u003ctemplate\u003e\n    \u003cdiv text=\"white\" bg=\"red-500\"\u003e\n        我是红色背景的白色文本\n    \u003c/div\u003e\n\u003ctemplate\u003e\n```\n这在调整边距尺寸以及等方面可以减少代码量。\n\n同时预设 [排版](https://cn.windicss.org/plugins/official/typography.html) 插件，解决简单的布局困难问题。\n\n当然也支持 [可视化分析器](https://cn.windicss.org/features/analyzer.html) 生成 `原子css` 报告.\n\n在终端中输入命令，即可看到报告\n```shell\npnpm analysis\n\n# 或者 npm run analysis\n# 或者 yarn analysis\n```\n或者打包输出该报告\n```shell\npnpm analysis:build\n\n# 或者 npm run analysis:build\n# 或者 yarn analysis:build\n```\n\n具体可见 👉 [Windi CSS](https://cn.windicss.org/)\n\n\n\u003cbr /\u003e\n\n### [12. 暗黑模式支持](https://cn.windicss.org/features/dark-mode.html#dark-mode)\n\n暗黑模式由 `Windi CSS` 的 `暗黑模式` 和 `VueUse` 实现。  \n\n`src/composables` 目录用来存储 `composition-api` 模块。\n\n该目录下预设了`useDarks` 模块，该模块导出 `isDark` 和 `toggleDark` 用来显示和切换暗黑模式。\n\n```ts\n// src/composables/useDarks.ts\n\n// vueuse的 api 会自动按需引入，无需import\nexport const isDark = useDark()\nexport const toggleDark = useToggle(isDark)\n\nexport const useDarks = () =\u003e ({ isDark, toggleDark })\n```\n\n模板中即可直接用\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { useDarks } from \"../composables/useDarks\";\n\nconst { isDark, toggleDark } = useDarks()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv m=\"6\"\u003e\n        Hello，This is the tov template！！\n    \u003c/div\u003e\n    \u003cdiv m=\"6\" cursor=\"pointer\" @click=\"toggleDark()\"\u003e\n        light: {{ isDark }} click me!!\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n\n具体可见 👉 [暗黑模式](https://cn.windicss.org/features/dark-mode.html#dark-mode)\n\n\n\u003cbr /\u003e\n\n### [13. SWR 请求支持](https://cn.attojs.org/)\n\nSWR 是更现代的请求方式，具体可见文章 👉 [SWR](https://zhuanlan.zhihu.com/p/89570321)。 \n\n而 [vue-request](https://cn.attojs.org/) 是一个 `SWR` 的 `Vue` 版本请求库。\n\n你可以这样用，例如请求 `/api/test`\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n    import { useRequest } from \"vue-request\"\n    const { data, loading, error } = useRequest('/api/test')\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv\u003edata: {{data}}\u003c/div\u003e\n    \u003cdiv\u003eerror: {{error}}\u003c/div\u003e\n    \u003cdiv\u003eloading: {{loading}}\u003c/div\u003e\n\u003c/template\u003e\n```\n所有基本的数据，状态和缓存都帮你搞定了，不需要重新封装。\n\n具体可见 👉 [vue-request](https://cn.attojs.org/)\n\n\u003cbr /\u003e\n\n### [14. pinia 状态管理](https://pinia.vuejs.org/)\n\n`pinia` 是下一代的状态管理库，比 `vuex` 更简单，`ts` 支持更好。\n\n你可以在 `src/stores` 中进行状态的定义。  \n\n例如创建 `src/stores/counter.ts` 👇\n\n```ts\n// src/stores/counter.ts\nimport { defineStore } from 'pinia'\n\nexport const useCounterStore = defineStore('counter', {\n  state: () =\u003e {\n    return { count: 0 }\n  },\n  actions: {\n    inc() {\n      this.count++\n    },\n  },\n})\n```\n定义完后在 `setup` 中直接使用即可\n```html\n\u003c!-- src/pages/index.vue --\u003e\n\u003cscript setup lang=\"ts\"\u003e\n    import { useCounterStore } from \"../stores/counter\"\n    const Counter = useCounterStore()\n\u003cscript\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv @click=\"Counter.inc\"\u003e{{Counter.count}}\u003c/div\u003e\n\u003c/template\u003e\n```\n更多具体使用可见 👉 [pinia](https://pinia.vuejs.org/)\n\n\u003cbr /\u003e\n\n### [15. pnpm 包管理器](https://pnpm.io/zh/)\n\n`pnpm` 是非常优秀的包管理器，更快、更节省空间、更合理。\n\n具体可见 👉 [pnpm](https://pnpm.io/zh/)\n\n\u003cbr /\u003e\n\n### [16. 跳转进度条支持](https://github.com/rstacruz/nprogress)\n\n跳转进度条由 `nprogress` 实现，可在`src/styles/main.css` 中调整配色。\n```css\n/** src/styles/main.css **/\n\n/** 省略其他样式 **/\n#nprogress .bar {\n    @apply bg-purple-700 bg-opacity-75; /** 配色 **/\n\n    position: fixed;\n    z-index: 1031;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: 2px;\n}\n```\n关于 `@apply` 由 [Windi Css apply 指令](https://cn.windicss.org/features/directives.html#apply) 实现。\n\n具体可见 👉 [nprogress](https://github.com/rstacruz/nprogress)\n\n\u003cbr /\u003e\n\n### [17. Inspect 调试支持](https://github.com/antfu/vite-plugin-inspect)\n\n启动项目\n```shell\npnpm dev\n\n# 或者 npm run dev\n# 或者 yarn dev\n```\n可以看到一个 `url`\n\n![inspect](public/docs/inspect.png)\n\n先进入 `http://localhost:3000`，再进入 `http://localhost:3000/__inspect/` 即可获得依赖图谱。\n\n![inspect-atlas](public/docs/inspect-atlas.png)\n\n通过顶部的一些按钮还可以调整依赖呈现。\n\n具体可见 👉 [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect)\n\n\u003cbr /\u003e\n\n### 18. 插件自动加载支持\n\n该功能由 `vite` 的 [Global 导入](https://cn.vitejs.dev/guide/features.html#glob-import) 实现。  \n\n只需要在 `src/modules` 中的模块里导出默认函数即可。  \n\n例如 `pinia`，只需要这样做。\n```ts\n// src/modules/pinia.ts\n\nimport { App } from 'vue'\n\n// 导出 default 接口\nexport default (app: App) =\u003e app.use(createPinia())\n```\n\n或者 `vue-router`\n\n```ts\n// src/modules/router.ts\n\nimport { App } from 'vue'\n\n// 省略各种配置\n\n// 导出 default 接口\nexport default (app: App) =\u003e app.use(router)\n```\n当然 `pinia` 和 `vue-router` 已经预设好了，你不需要重新关注他们。\n\n具体可见实现 👉 [插件自动加载实现](/src/main.ts)\n\n\u003cbr /\u003e\n\n### [19. Vitest 单元测试支持](https://vitest.dev/guide/#configuring-vitest)\n\n在 `src/test` 目录中可以书写单元测试。\n\n```ts\nimport { it, describe, expect, assert } from 'vitest'\n\ndescribe('suite name', () =\u003e {\n    it('foo', () =\u003e {\n        expect(1 + 1).toEqual(2)\n        expect(true).to.be.true\n    })\n\n    it('bar', () =\u003e {\n        assert.equal(Math.sqrt(4), 2)\n    })\n\n    it('snapshot', () =\u003e {\n        expect({ foo: 'bar' }).toMatchSnapshot()\n    })\n})\n```\n\n然后在终端中输入命令即可测试\n\n```shell\npnpm test\n\n# 或者 npm run test\n# 或者 yarn test\n```\n\n或者生成报告\n\n```shell\npnpm coverage\n\n# 或者 npm run coverage\n# 或者 yarn coverage\n```\n\n具体可见 👉 [Vitest](https://vitest.dev/guide/#configuring-vitest)\n\n\u003cbr /\u003e\n\n### [20. 支持 Markdown 渲染](https://github.com/antfu/vite-plugin-md)\n\n`markdown` 渲染可以用来书写一些简单的说明。  \n\n只需要把 `src/pages` 目录下的页面后缀由 `.vue` 改为 `.md`，然后再改为 `markdown` 语法即可。\n\n例如 `src/pages/about.md`\n\n```md\n## About Page\n\n\u003e The page is markdown file\n```\n\n当你路由到 `/about` 后即可看到对应的 `markdown` 渲染。\n\n具体可见 👉 [vite-plugin-md](https://github.com/antfu/vite-plugin-md)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n\n### 21. 路径别名 `~` 支持\n\n`~` 路径将被导向项目的 `src` 目录。\n\n```html\n\u003c!-- src/pages/index.vue --\u003e\n\u003cscript lang=\"ts\" setup\u003e\n    import { useDarks } from \"~/composables/dark\"\n\n// 等价于\n// import { useDarks } from \"../composables/dark\"\n\u003c/script\u003e\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### 22. 命令行自动创建与删除\n\n只要输入 👇，即可创建一个标准的页面或组件\n```shell\npnpm auto:create\n\n# 或者 npm run auto:create\n# 或者 yarn auto:create\n```\n当然也可以进行删除 👇\n```shell\npnpm auto:remove\n\n# 或者 npm run auto:remove\n# 或者 yarn auto:remove\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### [23. i18n 国际化支持](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n)\n\n在日常的业务当中，可能会存在一些需要国际化的场景。那么只需要在根目录下的 `locales` 中定义不同语言的 `yml` 即可在项目中做到开箱即用的国际化支持。\n\n比如 `locales/en.yml` 中用来定义需要国际化支持的英文内容。\n```yml\n# locales/en.yml\n# English\n\nindex: index\nabout: about\nnot-found: Notfound\n```\n又如 `locales/zh-CN.yml` 中用来定义需要国际化支持的中文内容。\n\n```yml\n# locales/zh-CN.yml\n# 中文\n\nindex: 主页\nabout: 关于\nnot-found: 未找到页面\n```\n\n此时在组件中即可这样用 👇\n```html\n\u003cscript setup\u003e\n// 该api是全局按需引入的，所以可以直接用\n// t 用来绑定特定的语块\nconst { t, locale } = useI18n()\n\nconst toggleLocale = () =\u003e {\n     // locale.value 用来表示当前所属语言，可修改进行语言切换\n     locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv m=\"6\" cursor=\"pointer\" @click=\"toggleLocale()\"\u003elanguage: {{ t('index') }} click me!!\u003c/div\u003e\n\u003c/template\u003e\n```\n\n更详细的说明可见用到的 `vite 插件` 👉 [@intlify/vite-plugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n) 与 `vue插件` [vue-i18n](https://github.com/intlify/vue-i18n-next)。\n\n另外 `yml` 是目前前端中流行的配置文件格式，语法可见阮一峰先生的 👉 [YAML 语言教程](http://www.ruanyifeng.com/blog/2016/07/yaml.html)。\n\n`vscode` 插件推荐: \n\n- 多合一的 `i18n` 支持 [i18n Ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)  \n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### 24. 漂亮的 `404` 页支持\n在日常业务中，当用户访问不存在的页面时，应该给到我们的用户一个不存在的信息提示，而这个提示的页面就是 `404` 页。\n\n你可以随便访问一个不存在的页面，例如 `/bucunzai`\n\n![notFound](public/docs/notFound.png)\n\n当然还有暗黑模式适应。\n\n![notFound-dark](public/docs/notFound-dark.png)\n\n也支持简单的响应式适应。例如移动端浏览器上会有正确的显示。\n\n当然如果这个 `404` 的封面不符合你的口味，那么可以在 `pages/[...notFound].vue` 中修改 `img` 标签的 `src`。默认是 `32.svg`，支持 `1 ~ 33` 的 `svg`。\n\n例如，默认 👇\n```html\n\u003c!-- 省略各种代码 --\u003e\n\u003ctemplate\u003e\n    \u003cimg src=\"/notFound/32.svg\" class=\"cover\" alt=\"page not found\" /\u003e\n\u003c/template\u003e\n```\n\n修改 `/notFound/32.svg` 为 `/notFound/33.svg`\n\n```html\n\u003c!-- 省略各种代码 --\u003e\n\u003ctemplate\u003e\n    \u003cimg src=\"/notFound/33.svg\" class=\"cover\" alt=\"page not found\" /\u003e\n\u003c/template\u003e\n```\n即可切换封面为 👇\n\n![notFound-other](public/docs/notFound-other.png)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n### 25. [`tsx` 支持](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx)\n\n只需要 `tsx` 文件放在 `src/components` 下，即可直接在模板中使用。\n\n例如你有一个 `src/components/foo.tsx` 文件，那么即可直接在模板中使用。\n\n```tsx\n// src/components/foo.tsx\nexport default defineComponent({\n    render() {\n        return \u003cdiv\u003eTest\u003c/div\u003e\n    }\n})\n```\n\n```html\n\u003ctemplate\u003e\n    \u003cfoo /\u003e\n\u003c/template\u003e\n```\n\n具体可见 👉 [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### 26. [`gzip` 资源压缩支持](https://github.com/vbenjs/vite-plugin-compression)\n\n生产环境下开箱即用的 `gzip` 资源压缩，无需配置。\n\n具体可见 👉 [vite-plugin-compression](https://github.com/vbenjs/vite-plugin-compression)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## License\n\nMade with markthree\n\nPublished under [MIT License](./LICENSE).\n\n\u003cbr /\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkthree%2Ftov-template-with-element-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkthree%2Ftov-template-with-element-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkthree%2Ftov-template-with-element-plus/lists"}