{"id":23011827,"url":"https://github.com/cdtrsfe/vue-preset","last_synced_at":"2025-08-14T06:32:16.187Z","repository":{"id":42672030,"uuid":"327181965","full_name":"CDTRSFE/vue-preset","owner":"CDTRSFE","description":"🔥 一个用于生成自定义模板的 Vue CLI 4.x preset，支持 Vue3。","archived":false,"fork":false,"pushed_at":"2023-03-05T18:49:51.000Z","size":748,"stargazers_count":7,"open_issues_count":4,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2023-03-10T12:55:59.870Z","etag":null,"topics":["preset","template","vue","vue-cli4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/CDTRSFE.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}},"created_at":"2021-01-06T02:52:25.000Z","updated_at":"2022-02-22T06:29:59.000Z","dependencies_parsed_at":"2023-02-08T03:02:39.942Z","dependency_job_id":null,"html_url":"https://github.com/CDTRSFE/vue-preset","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CDTRSFE%2Fvue-preset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CDTRSFE%2Fvue-preset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CDTRSFE%2Fvue-preset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CDTRSFE%2Fvue-preset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CDTRSFE","download_url":"https://codeload.github.com/CDTRSFE/vue-preset/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229805132,"owners_count":18126808,"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":["preset","template","vue","vue-cli4"],"created_at":"2024-12-15T10:11:21.113Z","updated_at":"2024-12-15T10:11:21.685Z","avatar_url":"https://github.com/CDTRSFE.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-preset\n\n一个用于生成自定义模板的 Vue CLI 4.x preset，包含了创建项目时所需的选项和插件，以及自定义的模板文件，所预设的插件和配置有：Less、Axios、Router、Vuex、StyleLint、Eslint、Babel。\n\n\u003e 模板存放在 `/generator/template`，创建项目时自动生成，如果要调整模板需注意：空文件和文件夹会被忽略，模板要考虑[文件名的边界情况](https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#%E6%96%87%E4%BB%B6%E5%90%8D%E7%9A%84%E8%BE%B9%E7%95%8C%E6%83%85%E5%86%B5)，以点开头的模板需要使用下划线取代那个点，以下划线开头的文件需要使用两个下划线来取代单个下划线。\n\n## 使用\n\n```bash\n$ vue create --preset CDTRSFE/vue-preset \u003capp-name\u003e\n```\n\n+ Vue 版本选择\n\n创建过程中会有选择提示，可以选择 Vue 版本，默认是 2.x。如果需要使用 Vue3，先[升级 Vue CLI](https://cli.vuejs.org/guide/installation.html#upgrading) 至 v4.5 及以上版本。\n\n```shell\n? Choose a version of Vue.js (Use arrow keys)\n❯ 2.x\n  3.x\n```\n\n+ 项目类型选择\n\n选择 `data visualization project` 可创建数据可视化大屏项目，会在 `default project` 基础之上额外安装 `echarts` `animate.css`。\n\n```shell\n? What type of project do you want to create? (Use arrow keys)\n❯ default project\n  data visualization project\n```\n\n+ UI 组件库选择\n\n还可以选择需要使用的 UI 组件库，数据可视化大屏项目不会出现此提示。\n\n```shell\n? Choice a UI Framework (Use arrow keys)\n❯ none\n  Element UI\n```\n\n创建完成后目录结构：\n\n```\n.\n├── public\n├── src\n│   ├── App.vue\n│   ├── assets\n│   │   └── styles\n│   │       ├── public.less       # 公共样式\n│   │       └── resources.less    # 全局变量等\n│   ├── components\n│   │   ├── common                # 全局公用组件\n│   │   ├── index.js\n│   │   └── normal                # 公用组件\n│   ├── main.js\n│   ├── plugins\n│   │   ├── axios.js              # Axios\n│   │   ├── directives.js         # 全局指令\n│   │   └── filters.js            # 全局过滤器\n│   ├── router\n│   └── store\n├── stylelint.config.js           # stylelint 配置\n├── README.md\n├── .eslintrc.js                  # ESLint 配置\n├── Version.ReadMe.md             # 版本日志\n├── babel.config.js\n├── package-lock.json\n├── package.json\n└── vue.config.js\n```\n\n## 样式相关\n\n~~`public/styles` 目录下放了两个 CSS 文件，一个是样式重置，一个是高频率使用的一些 class，在 `public/index.html` 文件中引入。~~\n\n样式重置和高频率使用的 class，这两部分公共样式文件从模板中提取出来，放在 [tp-common.css](https://github.com/CDTRSFE/tp-common.css) 里单独维护。如果项目里需要用到全局样式，都放在 `src/assets/styles/public.less` 中，此文件在 `main.js` 引入。\n\n项目采用 Less 作为 CSS 预处理器，`src/assets/styles/` 目录下放了一个 `resources.less` 文件，用于存放一些全局的变量或 mixin 等。此文件[自动导入](https://cli.vuejs.org/zh/guide/css.html#%E8%87%AA%E5%8A%A8%E5%8C%96%E5%AF%BC%E5%85%A5)到每个单文件组件和 Less 文件里。\n\n在 vue.config.js 中已配置 `style-resources-loader`，无需再使用 `vue add style-resources-loader` 安装 [vue-cli-plugin-style-resources-loader](https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader) 了。\n\n## 字体文件\n\niconfont 和其他字体文件都放在 `public` 文件夹下，在 `public/index.html` 引入对应的 CSS / js 文件。建议在 `public/iconfont/info.md` 文件中记录图标库的地址和管理员账号，方便后续维护。\n\n```\n.\n├── font\n│   ├── f.ttf\n│   └── font.css\n└── iconfont\n    ├── f.ttf\n    └── iconfont.css\n```\n\n```html\n\u003c!-- index.html --\u003e\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"\u003c%= BASE_URL %\u003eiconfont/iconfont.css\" /\u003e\n    \u003clink rel=\"stylesheet\" href=\"\u003c%= BASE_URL %\u003efont/font.css\" /\u003e\n\u003c/head\u003e\n```\n\n## 组件\n\n公用组件放在 `src/components/` 下，`common/` 目录存放全局公用组件，为了方便自动全局注册，以及考虑到复杂组件需要拆分成多个文件的情况，每个全局组件都放在单独的文件夹里，并至少包含一个 `Index.vue` 作为入口。其他公用组件放在 `normal/` 里，使用时引入。\n\n## 指令/过滤器\n\n指令放在 `src/plugins/directives.js` 里，过滤器放在 `src/plugins/filters.js` 里，都是自动全局注册。\n\n## Vuex\n\n为了避免 store 对象变得臃肿，根据业务把 store 拆分成带命名空间的模块，所有模块放在 `src/store/modules/` 下，实例化 `vuex` 之前自动导入 `modules` 下的所有模块，并开启热更新。\n\n## ESLint\n\n所有自定义规则都放在了 [eslint-config-tpconfig](https://github.com/CDTRSFE/eslint-config-tpconfig) 里单独维护，创建项目后自动生成的 `.eslintrc.js` 文件里不再有 `rules`。在编辑器中，建议安装 [Eslint 插件](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)，并开启保存时自动修复。\n\n```json\n// vscode settings.json\n{\n    \"editor.codeActionsOnSave\": {\n      \"source.fixAll.eslint\": true\n    }\n}\n```\n\n## stylelint\n\n所有自定义规则都放在了[stylelint-config-tpconfig](https://github.com/CDTRSFE/stylelint-config-tpconfig) 里单独维护，创建项目后自动生成的 `stylelint.config.js` 文件里不再有 `rules` 。在编辑器中，建议安装 [stylelint 插件](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)。并开启保存时自动修复。\n\n```json\n// vscode settings.json\n{\n    \"editor.codeActionsOnSave\": {\n      \"source.fixAll.stylelint\": true\n    }\n}\n```\n\n## 版本控制\n\n- [ ] 自动生成版本日志\n- [x] pre-commit 代码校验\n- [x] commit message 格式校验\n\n\u003e 为了方便生成版本日志，提交代码时输入的 message 需要按照一定的[格式](https://www.conventionalcommits.org/en/v1.0.0/)，如 `feat(blog): add comment section`，可以使用 [`git cz`](https://github.com/commitizen/cz-cli) 代替 `git commit` 生成符合规范的 message。\n## Babel\n\n使用了 [transform-remove-debugger](https://github.com/babel/minify/tree/master/packages/babel-plugin-transform-remove-debugger) 和 [transform-remove-console](https://github.com/babel/minify/tree/master/packages/babel-plugin-transform-remove-console)，生产环境代码删除 `debugger` 和 `console`。\n\n## 相关链接\n\n+ Vue 项目规范文档: [https://wiki.trscd.com.cn/pages/viewpage.action?pageId=59900220](https://wiki.trscd.com.cn/pages/viewpage.action?pageId=59900220)\n\n+ ESLint 配置: [https://github.com/CDTRSFE/eslint-config-tpconfig](https://github.com/CDTRSFE/eslint-config-tpconfig)\n\n+ stylelint 配置: [https://github.com/CDTRSFE/stylelint-config-tpconfig](https://github.com/CDTRSFE/stylelint-config-tpconfig)\n\n+ 公共样式: [https://github.com/CDTRSFE/tp-common.css](https://github.com/CDTRSFE/tp-common.css)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdtrsfe%2Fvue-preset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdtrsfe%2Fvue-preset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdtrsfe%2Fvue-preset/lists"}