{"id":21570903,"url":"https://github.com/rexhang/vue-create-app","last_synced_at":"2025-06-21T10:07:59.872Z","repository":{"id":182552457,"uuid":"668690360","full_name":"rexhang/vue-create-app","owner":"rexhang","description":"vue-create-app basic.","archived":false,"fork":false,"pushed_at":"2023-07-20T11:37:04.000Z","size":224,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-21T10:07:43.955Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/rexhang.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}},"created_at":"2023-07-20T11:33:32.000Z","updated_at":"2023-07-20T11:37:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"ad671d6b-df8b-4c2a-99ae-b4240d4859a6","html_url":"https://github.com/rexhang/vue-create-app","commit_stats":null,"previous_names":["rexhang/vue-create-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rexhang/vue-create-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexhang%2Fvue-create-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexhang%2Fvue-create-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexhang%2Fvue-create-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexhang%2Fvue-create-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rexhang","download_url":"https://codeload.github.com/rexhang/vue-create-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexhang%2Fvue-create-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261103451,"owners_count":23109932,"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-24T11:14:13.440Z","updated_at":"2025-06-21T10:07:54.858Z","avatar_url":"https://github.com/rexhang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e项目开发大纲 📝\u003c/h1\u003e\n\n### 基础集成环境版本:\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://nodejs.org\"\u003e\n    \u003cimg alt=\"node-v16.19.x\" src=\"https://img.shields.io/badge/node-v16.19.x-blue.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://nodejs.org\"\u003e\n    \u003cimg alt=\"npm-v8.19.x\" src=\"https://img.shields.io/badge/npm-v8.19.x-blue.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"javascript:;\"\u003e\n    \u003cimg alt=\"license-Commercial\" src=\"https://img.shields.io/badge/license-Commercial-yellow.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://v2.cn.vuejs.org\"\u003e\n    \u003cimg alt=\"ADF-Vue@v2.x\" src=\"https://img.shields.io/badge/ADF-Vue@v2.x-green.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://webpack.docschina.org\"\u003e\n    \u003cimg alt=\"build-Webpack@v4.x\" src=\"https://img.shields.io/badge/build-Webpack@v4.x-blue.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://element.eleme.io\"\u003e\n    \u003cimg alt=\"UI-ElementUI@v2.15.x\" src=\"https://img.shields.io/badge/UI-ElementUI@v2.15.x-blue.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"javascript:;\"\u003e\n    \u003cimg alt=\"codecov-100%\" src=\"https://codecov.io/gh/kefranabg/readme-md-generator/branch/master/graph/badge.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"javascript:;\"\u003e\n    \u003cimg alt=\"changelog-GitMoji\" src=\"https://img.shields.io/badge/changelog-GitMoji-green.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n### Project setup:\n\n```\nyarn install\n```\n\n#### Compiles and hot-reloads for development\n```\nyarn serve\n```\n\n#### Compiles and minifies for production\n\n```\nyarn build\n```\n\n#### Lints and fixes files\n```\nyarn lint\n```\n\n#### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n### 基础目录结构:\n\n```javascript\n.vscode/   ------------------- 这个目录存放的是使用vscode时，项目的配置相关文件，例如调试模式(F5)，项目插件等一些的项目配置内容\nnode_nodules/   -------------- 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件\nbuild   ---------------------- 文件夹，用来存放项目构建脚本\npublic/ ---------------------- 放置一些静态资源，而且在项目打包的时候webpack不会编译这个文件夹\nmock  ------------------------ mock数据的文件夹 模拟一些假的数据 eg: mock.js 亦可配合使用json-server + REST Client\nsrc/    ---------------------- 这个目录下存放项目的源码，即开发者写的代码放在这里\n|- api  ---------------------- 统一接口目录\n|- assets  ------------------- 里面放置一些静态资源（一般共享的），放在assets文件夹里面静态资源，会进行编译\n|- components  --------------- 公共组件目录\n|- directives  --------------- 自定义指令目录\n|- mixins  ------------------- 自定义混入组件目录\n|- router  ------------------- VueRouter目录\n|- store  -------------------- Vuex目录\n|- icons  -------------------- 放置了一些svg矢量图\n|- styles  ------------------- 样式文件目录\n|- utils  -------------------- 工具目录\n|- layouts  ------------------ 如果是管理类软件， 放置公共布局类组件 如：Container, SideMenu、SideMenu.vue。\n|- views  -------------------- 页面组件目录\n|- App.vue  ------------------ 根组件\n|- main.js  ------------------ 入口文件\n|- permission.js  ------------ 与导航守卫相关\n|- settings ------------------ 项目的配置项文件\n.browserslistrc\n.env.development\n.env.production\n.eslintrc.js\n.gitinore\nbabel.config.js\npackage.json\nREADME.md\nvue.config.js\n```\n\n继续补充完整，直至和实际项目开发内容一致。\n\n## 文件导入导出规范:\n目录需要定义入口文件index.js用于导出全部模块文件\neg(utils/index.js, utils/x1.js, utils/x2.js, ...):\n```javascript\nexport * from './x1.js';\nexport * from './x2.js';\n...\n```\n使用的时候按需引入\n```javascript\nimport { getLocalName, ...rest } from './utils';\n```\n\n### 目录、文件、组件、组件结构的命名规范:\n\n#### 1.目录命名\n\n全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数（例如images -\u003e img）。\n\n项目目录与其项目一级导航菜单统一，便于管理，二级导航放在一级导航文件夹下，以此类推。\n\n复数命名法：文件夹可缩写，文件尽量不缩写，变量可缩写(但需备注全称)。\n原因：一个项目，目录不会很多，文件会很多，变量会更多，变量的缩写可以备注，但文件的缩写无法备注，需要让人直观的了解到文件的作用，\n\n```javascript\n// 正例\n/center/supplier/abs-page.vue,\n\n// 反例\n/center/sup/abs_page.vue',\n```\n\n#### 2.文件命名\n\nJS、CSS、SCSS、HTML、PNG命名，全部采用小写方式， 以中划线分隔。\n\n```javascript\n// 正例\n@/assets/img/logo-white.png，\n\n// 反例\n@/assets/img/logoWhite.png\n```\n\n#### 3.组件命名\n\n组件名以单词大写开头，当多个单词拼写成的组件时，采用驼峰式命名规则 (**PascalCase**)。一般是多个单词全拼，减少简写的情况，这样增加可读性。\n\ncomponents/\n|- MyComponent.vue\n应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App。\n\ncomponents/\n|- BaseButton.vue\n|- BaseTable.vue\n|- BaseIcon.vue\n组件应该都放到components文件夹下，单个页面独立一个文件夹，用来放相对应的VUE文件以及页面相关的样式文件，样式少可直接写到页面组件里边，这样更符合组件化的思想。\n\n#### 4.组件结构\n\n组件结构遵循从上往下template，script，style的结构。\n\n`\u003cscript\u003e`的import顺序，分模块，拆分来写\n首先引入npm包里的内容\n\n其次引入全局的一些组件、方法\n\n最后引入当前业务模块的组件、方法\n\ndata里面的数据，按模块顺序，分开书写\n用空格隔开\n\n```javascript\ndata (){\n  return {\n    //模块一\n    xx1,\n    xx2,\n\n    //中间用空一行\n    //模块二\n    qq1,\n    qq2\n  }\n}\nvue2 的option对象，属性需要按顺序排列\nname\nmixins\ncomponents\nprops\ndata\nfilters\ndirective\ncomputed\nwatch\n生命周期（按执行顺序）\nmethods\n```\n\n### 代码规范:\n\n#### template规范\n\n尽量使用以.vue结束的单文件组件，方便管理，结构清晰。\n\n标签语义化，避免清一色的div元素\n\nDOM的层级数尽可能少，优化渲染速度。\n\n多特性，分行写，提高可读性。即一个标签内有多个属性，属性分行写。\n\n自定义标签：使用自闭标签的写法。例如：，如果自定义标签中间需要传入slot，则写开始标签和结束标签，结束标签必须加/。\n\nv-slot：在vue2.6版本中，slot与slot-scope已被弃用，统一使用v-slot指令。\n\n不使用v-html指令\n\n不写过于复杂的表达式，使用计算属性来代替\n\n相同的卡片布局，首先整合数据，尽量使用循环方式去增加，避免变更多处的问题。\n\nv-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一，key一般使用index或者todo.id。\n\n```html\n\u003cul\u003e\n    \u003cli\n    v-for=\"todo in todos\"\n    :key=\"todo.id\"\n    \u003e\n    {{ todo.text }}\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n避免 v-if 和 v-for 同时用在一个元素上（性能问题），以下为**两种**解决方案：\n\n1. 将数据替换为一个计算属性，让其返回过滤后的列表。\n2. 将 v-if 移动至容器元素上 (比如 ul, ol, div, ...)。\n\n#### css规范\n\n需要加上scoped作用域\n\n避免使用标签选择器（效率低、损耗性能）。\n\nCSS 属性书写顺序：先决定定位宽高显示大小，再做局部细节修饰！推荐顺序：定位属性(或显示属性，display)-\u003e宽高属性-\u003e边距属性(margin, padding)-\u003e字体，背景，颜色等，修饰属性的定义。\n\n#### js规范\n\n在 **script** 标签中，应该遵守 JS的规范和ES6规范。\n\n创建公共的JS，封装公用的方法和工具类。\n\n声明变量必须赋值\n\n使用let、const替代var\n\n由于变量提升、无块级作用域等原因，var基本上已经退出了历史的舞台\n\n匿名函数使用箭头函数\n```javascript\n// 反例\nconst _this = this\nsetTimeout(function() {\n  _this.xxx()\n}, 10)\n\n// 正例\nsetTimeout(() =\u003e {\n  this.xxx()\n}, 10)\n```\n\n避免回调地狱，使用以下为两种解决方案：\n\n方法返回Promise，方便可以通过 .then 的方式进行链式调用\n\n获取异步的数据，按具体情况使用 async/await 操作\n\n三元运算符不嵌套\n\n三元运算符只用作单行操作，如果嵌套过深的话，会增加阅读难度\n\n使用map、object替代if、switch case条件取值\n```javascript\n// 反例\nlet statusName = ''\nif (type === 1) {\n    statusName = '草稿'\n} else if (type === 2) {\n    statusName = '已发布'\n} else if (type === 3) {\n    statusName = '已删除'\n}\n// 正例\nlet statusName = {\n    1: '草稿',\n    2: '已发布',\n    3: '已删除'\n}[type] || ''\n```\n\n慎用**setTimeout**\n\n禁止通过 setTimeout 来获取异步接口的数据\n能通过 this.$nextTick实现的，不用 setTimeout\n\n无特殊情况不允许使用原生API操作DOM，谨慎使用this.$refs直接操作DOM\n\n操作DOM是及其损耗性能得， 代码的质量会降低，出现一些多余得代码;\n\n经常直接操作DOM 会导致一些不可预测得问题，当你在一个组件当中直接操作全局得DOM时，有可能会影响到其他页面，一旦报错，定位问题会比较困难。\n\n需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。\n\n尽量使用”===“和”!==“\n\n整合数据时尽量使用ES6，Object.assign和 … 扩展符（ps：Object.assign() 为浅复制）\n\n若循环中需使用函数，请将函数定义在循环外部而非内部，这样可以避免函数的反复创建。\n\nProps定义：提供默认值，使用Type属性校验类型，使用Props之前先检查Prop是否存在。\n```javascript\n//正确\nprops: {\n     status: String\n}\n// 更好的做法！\nprops: {\n    status: {\n        type: String,\n        required: true,\n        validator: function (value) {\n            return [\n                    'syncing',\n                    'synced',\n                    'version-conflict',\n                    'error'\n                    ].indexOf(value) !== -1\n        }\n    }\n}\n// 反例\n// 这样做只有开发原型系统时可以接受\nprops: ['status']\n```\n\n当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。\n```javascript\nexport default {\n    data () {\n        return {\n            foo: 'bar'\n        }\n    }\n}\n```\n\nJS中统一使用反引号（``）或是单引号('')， 不使用双引号(\"\")。\n\n避免 v-if 和 v-for 用在一起\n```javascript\n\u003cul v-if=\"shouldShowUsers\"\u003e\n    \u003cli\n        v-for=\"user in users\"\n        :key=\"user.id\"\n    \u003e\n        {{ user.name }}\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n函数中统一使用_this=this来解决全局指向问题。\n\n导入模块时不要省略后缀（js 除外），这样有利于 IDE 感知（特别是 .vue）。\n\n弹框、select等需要大量代码去实现，要以组件的方式引入。\n\n应该把复杂计算属性分割为尽可能多的更简单的属性。\n\n使用路由懒加载（延迟加载）机制\n\n```javascript\n//路由懒加载\nconst HelloWorld = ()=\u003eimport(\"@/components/HelloWorld\")\nexport default new Router({\n  routes: [\n    {\n      path: '/',\n      name: 'HelloWorld',\n      component:HelloWorld\n    }\n  ]\n})\n```\n\n组件懒加载，较复杂的组件可使用，建议多使用\n```javascript\n\u003ctemplate\u003e\n  \u003cdiv class=\"hello\"\u003e\n  \u003cOne-com\u003e\u003c/One-com\u003e\n  1111\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n//懒加载组件\nconst One = ()=\u003eimport(\"./one\");\nexport default {\n  components:{\n    \"One-com\":One\n  },\n  data () {\n    return {\n      msg: 'Welcome to Your Vue.js App'\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n调试信息console.log() ; debugger 使用完及时删除\n\n\n#### 图片规范\n每个模块都要增加一个图片文件夹方便后期维护和处理，图片文件命名尽量跟模块意义的相同，尽量使用小写单词命名。\n图片格式常用png，jpg，gif。\n命名全部用小写字母，数字及中划线组合，其中不包含汉字、空格和特殊字符；尽量用易懂的词汇，便于团队其他成员理解；命名分头尾两部分，用中划线隔开，（例如：ad-left01.png、btn-submit.png）。\n在保证视觉效果的情况下选最小的图片格式与图片质量，减少加载时间。\nPC端img图片必须填写width、height、alt属性\n需要变动的文字禁止切到图片中，如果不确定是否需要变动，请咨询接口人\n需要程序后台动态生成的图片，如道具图片、头像、奖品，必须单独切割出来\n装饰性图片合并成精灵图，减少页面请求\n\n#### 注释规范\n```html\n\u003c!-- 房间信息模块 --\u003e\n\u003cdiv class=\"room\"\u003e\n\t...\n\u003c/div\u003e\n\u003c!-- 房间信息模块 --\u003e\n```\n\n注意在注释的前后各有一个空格。\n\n文件顶部注释(多行)\n```javascript\n/**\n\n    @description: 文件中文说明\n\n    @author: 作者\n\n    @update: 作者 (2023-04-23 15:00)\n\n    ...\n\n**/\n```\n\n行级注释（注意//后面空格）：// 正确的注释\n\n变量声明注释：如果是在类似 Vue 项目的 data 属性中的变量，直接用行级样式跟在后面。\n```javascript\ndata(){\n return {\n         foo: 'bar' // 注释直接写这里\n    }\n}\n```\n\n如果是在类，构造函数，或者常量定义中的变量，使用块级注释。/ comment /\n\n函数声明注释：不必要在每一个函数都写注释，但是在公共函数，还是建议补全注释，让后面的人不需要重复造轮子。\n\n复杂的业务逻辑处理说明、特殊情况的代码处理说明，对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明\n\n#### 接口规范\n\n1、API接口地址统一管理，接口较少时可以单独写一个接口文件JS，页面中使用哪些引入哪些。\n\n2、接口较多时，可对接口按模块进行分类，一个模块对应一个接口文件。\n\n#### 其他规范\n\n1、文字超出容器需要进行 '...' 省略。\n\n2、图片显示 无特殊要求时，按原图宽高比显示，尽量不要变形。\n\n3、涉及数据处理功能按钮，增加防频繁点击处理。\n\n4、小图标尽量使用UI框架自带的icon图标。\n\n5、页面按钮颜色，样式，功能尽量统一。\n\n6、不同页面相同功能的提示文字尽量统一。\n\n#### 待补充规范\n\n开发者可以在以上基础规范内容上继续补充后续规范，直至和实际项目开发内容一致。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frexhang%2Fvue-create-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frexhang%2Fvue-create-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frexhang%2Fvue-create-app/lists"}