{"id":21818702,"url":"https://github.com/q13/ya-spa-vue","last_synced_at":"2025-06-27T01:32:27.107Z","repository":{"id":44116192,"uuid":"112711650","full_name":"q13/ya-spa-vue","owner":"q13","description":"A SPA bootstrap for yazuo powered by vue","archived":false,"fork":false,"pushed_at":"2022-02-12T07:38:18.000Z","size":493,"stargazers_count":7,"open_issues_count":3,"forks_count":12,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T02:28:31.229Z","etag":null,"topics":["business","framework","vue","wide-platform","ya"],"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/q13.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":"2017-12-01T07:57:48.000Z","updated_at":"2019-10-25T02:10:55.000Z","dependencies_parsed_at":"2022-09-22T10:53:48.215Z","dependency_job_id":null,"html_url":"https://github.com/q13/ya-spa-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/q13/ya-spa-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/q13%2Fya-spa-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/q13%2Fya-spa-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/q13%2Fya-spa-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/q13%2Fya-spa-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/q13","download_url":"https://codeload.github.com/q13/ya-spa-vue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/q13%2Fya-spa-vue/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262172533,"owners_count":23270038,"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":["business","framework","vue","wide-platform","ya"],"created_at":"2024-11-27T16:14:37.645Z","updated_at":"2025-06-27T01:32:27.069Z","avatar_url":"https://github.com/q13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A SPA bootstrap for yazuo powered by vue\n\n一套基于vue搭建的项目模板，适应多终端平台（PC/Mobile）。\n\n**关键字：职责分担，最小化关注范围，开箱即用，响应式重于命令式，懒加载加持**\n## 安装\n\n### 全局安装yz-cli脚手架\n\n```sh\nnpm install -g yz-cli\n```\n\n### 使用ya命令创建项目（eg. 项目名为demo）\n\n```sh\nya init demo\n```\n\n**执行过程如下，优先使用yarn安装：**\n\n\u003cimg alt=\"执行过程\" src=\"https://raw.githubusercontent.com/q13/ya-spa-vue/master/example/images/run.png\" /\u003e\n\n### 更新模板文件\n\n```sh\ncd demo\nya update\n```\n\n\n## 使用方法\n\n### 项目启动\n\n```sh\ncd demo\nnpm run dev\nnpm run mock\n```\n\n### 开发 \n\n\u003cimg alt=\"目录结构\" src=\"https://raw.githubusercontent.com/q13/ya-spa-vue/master/example/images/dir.png\" /\u003e\n\n使用支持**eslint**的Editor或IDE进行开发，**.eslintrc.json**默认在项目根目录下\n\n**业务类型的项目不要操作除src目录下以外的文件**\n\n#### App\n\n目录位置 **/src/app/**\n\n\u003cimg alt=\"app\" src=\"https://raw.githubusercontent.com/q13/ya-spa-vue/master/example/images/app.png\" /\u003e\n\n* **index.js：** App级别的公共逻辑放置位置，构建项目整体结构，粘合页面逻辑（page）和模块逻辑（module）\n* **preset.styl：** App预设样式\n* **sitmap.js：** 网站地图，配置路由和导航信息\n* **store.js：** 配置vuex store\n* **style.styl：** App框架样式\n* **template.html：** App模板结构\n\n#### Page\n\n目录位置 **/src/pages/**\n\n\u003cimg alt=\"page\" src=\"https://raw.githubusercontent.com/q13/ya-spa-vue/master/example/images/page.png\" /\u003e\n\n页面逻辑放置位置，以目录划分页面功能，多目录层级组织方式，文件组织方式如下：\n\n* 逻辑、结构、样式拆分组织（适合业务功能复杂的实现），对应文件命名**index.js、template.html、style.styl**，编写方式参考**demo1**\n* 逻辑、结构、样式组织成单文件（适合轻业务逻辑实现），对应文件命名**index.vue**，编写方式参考**demo2**\n\n#### module\n\n目录位置 **/src/modules/**\n\n业务功能模块放置位置，可能在项目范围内被多个页面逻辑多次引用，以目录划分模块功能，多目录扁平化组织方式，便于引用，文件组织方式参考**page**约定。\n\n\u003cimg alt=\"module\" src=\"https://raw.githubusercontent.com/q13/ya-spa-vue/master/example/images/module.png\" /\u003e\n\n#### widgets\n\n通用组件库放置位置，不和业务逻辑产生强耦合，可跨项目使用。组件和主题样式组织方式如下图：\n\n\u003cimg alt=\"widget\" src=\"https://raw.githubusercontent.com/q13/ya-spa-vue/master/example/images/widget.png\" /\u003e\n\n**特别要注意的：** 优先采用**ya-ui-vue**对第三方库**element-ui**、**mint-ui**、**antV**的封装。\n\n#### 其它\n\n* **/src/mock/** 放置mock接口文件，参考 [mock官方文档](http://mockjs.com/)\n* **/src/deps/** 放置项目依赖文件，包括静态资源文件如图片，svg，iconfont，工具库utils等等\n\n### 进一步\n\n* [文件命名和编码约束](https://github.com/q13/ya-spa-vue/blob/master/doc/common.md)\n* [Graph使用方式](https://github.com/q13/ya-spa-vue/blob/master/doc/graph.md)\n* [Hook api](https://github.com/q13/ya-spa-vue/blob/master/doc/hook.md)\n* [Utils api](https://github.com/q13/ya-spa-vue/blob/master/doc/utils.md)\n* [两种路由方案Activity/Fragment](https://github.com/q13/ya-spa-vue/blob/master/doc/router.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fq13%2Fya-spa-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fq13%2Fya-spa-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fq13%2Fya-spa-vue/lists"}