{"id":27705947,"url":"https://github.com/hanan198501/vue-spa-template","last_synced_at":"2025-04-26T05:01:43.773Z","repository":{"id":151916532,"uuid":"70915986","full_name":"annnhan/vue-spa-template","owner":"annnhan","description":"The base code of vue.js project.","archived":false,"fork":false,"pushed_at":"2017-05-03T03:42:28.000Z","size":47,"stargazers_count":665,"open_issues_count":0,"forks_count":260,"subscribers_count":52,"default_branch":"master","last_synced_at":"2025-04-19T21:07:40.626Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/annnhan.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}},"created_at":"2016-10-14T14:06:51.000Z","updated_at":"2025-03-10T03:37:55.000Z","dependencies_parsed_at":"2023-05-15T18:00:39.683Z","dependency_job_id":null,"html_url":"https://github.com/annnhan/vue-spa-template","commit_stats":null,"previous_names":["hanan198501/vue-spa-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annnhan%2Fvue-spa-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annnhan%2Fvue-spa-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annnhan%2Fvue-spa-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annnhan%2Fvue-spa-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/annnhan","download_url":"https://codeload.github.com/annnhan/vue-spa-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250935453,"owners_count":21510552,"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":"2025-04-26T05:01:11.443Z","updated_at":"2025-04-26T05:01:43.730Z","avatar_url":"https://github.com/annnhan.png","language":"JavaScript","funding_links":[],"categories":["开发框架"],"sub_categories":[],"readme":"## 项目简介\n\n基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。项目包含：\n\n- 基础库: `vue.js`、`vue-router`、`vuex`、`whatwg-fetch`\n- 编译/打包工具：`webpack`、`babel`、`node-sass`\n- 单元测试工具：`karma`、`mocha`、`sinon-chai`\n- 本地服务器：`express`\n\n## 目录结构\n\n    ├── README.md                       项目介绍\n    ├── index.html                      入口页面\n    ├── build                           构建脚本目录\n    │   ├── build-server.js                 运行本地构建服务器，可以访问构建后的页面\n    │   ├── build.js                        生产环境构建脚本\n    │   ├── dev-client.js                   开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新\n    │   ├── dev-server.js                   运行本地开发服务器\n    │   ├── utils.js                        构建相关工具方法\n    │   ├── webpack.base.conf.js            wabpack基础配置\n    │   ├── webpack.dev.conf.js             wabpack开发环境配置\n    │   └── webpack.prod.conf.js            wabpack生产环境配置\n    ├── config                          项目配置\n    │   ├── dev.env.js                      开发环境变量\n    │   ├── index.js                        项目配置文件\n    │   ├── prod.env.js                     生产环境变量\n    │   └── test.env.js                     测试环境变量\n    ├── mock                            mock数据目录\n    │   └── hello.js\n    ├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息\n    ├── src                             源码目录    \n    │   ├── main.js                         入口js文件\n    │   ├── app.vue                         根组件\n    │   ├── components                      公共组件目录\n    │   │   └── title.vue\n    │   ├── assets                          资源目录，这里的资源会被wabpack构建\n    │   │   └── images\n    │   │       └── logo.png\n    │   ├── routes                          前端路由\n    │   │   └── index.js\n    │   ├── store                           应用级数据（state）\n    │   │   └── index.js\n    │   └── views                           页面目录\n    │       ├── hello.vue\n    │       └── notfound.vue\n    ├── static                          纯静态资源，不会被wabpack构建。\n    └── test                            测试文件目录（unit\u0026e2e）\n        └── unit                            单元测试\n            ├── index.js                        入口脚本\n            ├── karma.conf.js                   karma配置文件\n            └── specs                           单测case目录\n                └── Hello.spec.js\n\n## 环境安装\n\n本项目依赖 node.js， 使用前先安装 node.js 和 cnpm（显著提升依赖包的下载速度）。\n1. 自行下载并安装 node.js： [https://nodejs.org/en/download/](https://nodejs.org/en/download/)\n2. 然后安装 cnpm 命令：\n\n        npm install -g cnpm --registry=https://registry.npm.taobao.org\n\n\n## 快速开始\n\n    git clone https://github.com/hanan198501/vue-spa-template.git \n    cd vue-spa-template\n    cnpm install\n    npm run dev\n\n## 命令列表：\n\n    #开启本地开发服务器，监控项目文件的变化，实时构建并自动刷新浏览器，浏览器访问 http://localhost:8081\n    npm run dev\n\n    #使用生产环境配置构建项目，构建好的文件会输出到 \"dist\" 目录，\n    npm run build\n\n    #运行构建服务器，可以查看构建的页面\n    npm run build-server\n\n    #运行单元测试\n    npm run unit\n    \n## 前后端分离\n\n项目基于 spa 方式实现前后端分离，服务器通过 nginx 区分前端页面和后端接口请求，分发到不同服务。前端物理上只有一个入口页面, 路由由前端控制（基于vue-router），根据不同的 url 加载相应数据和组件进行渲染。\n\n## 接口 mock\n\n前后端分离后，开发前需要和后端同学定义好接口信息（请求地址，参数，返回信息等），前端通过 mock 的方式，即可开始编码，无需等待后端接口 ready。\n项目的本地开发服务器是基于 express 搭建的，通过 express 的中间件机制，我们已经在 dev-server 中添加了接口 mock 功能。\n开发时，接口的 mock 数据统一放在 mock 目录下，每个文件内如下：\n\n\n    module.exports = {\n    \n      // 接口地址\n      api: '/api/hello',\n    \n      // 返回数据 参考http://expressjs.com/zh-cn/4x/api.html\n      response: function (req, res) {\n        res.send(`\n          \u003cp\u003ehello vue!\u003c/p\u003e\n        `);\n      }\n    }\n\n\n## 模块化\n\n开发时可以使用 ES2015 module 语法，构建时每个文件会编译成 amd 模块。\n\n## 组件化\n\n整个应用通过 vue 组件的方式搭建起来，通过 vue-router 控制相应组件的展现，组件树结构如下：\n\n    app.vue                         根组件（整个应用只有一个）\n        ├──view1.vue                    页面级组件，放在 views 目录里面，有子组件时，可以建立子目录\n        │   ├──component1.vue               功能组件，公用的放在 components 目录，否则放在 views 子目录\n        │   ├──component2.vue\n        │   └──component3.vue\n        ├──view2.vue\n        │   ├──component1.vue\n        │   └──component4.vue\n        └──view3.vue\n            ├──component5.vue\n            ……\n\n\n## 单元测试\n\n可以为每个组件编写单元测试，放在 `test/unit/specs` 目录下面, 单元测试用例的目录结构建议和测试的文件保持一致（相对于src），每个测试用例文件名以 `.spec.js`结尾。\n执行 `npm run unit` 时会遍历所有的 `spec.js` 文件，产出测试报告在 `test/unit/coverage` 目录。\n\n\n## 联调方式\n\n前后端分离后，由于服务端和前端的开发环境处于2台不同的机器上，前端的异步请求需要代理到后端机器中。\n联调的时候，只需通过 proxy 参数运行 dev 脚本即可，所有 mock 目录下定义的接口将会转发到 proxy 参数指定的机器：\n\n    # 172.16.36.90:8083 为后端机器的环境地址\n    npm run dev -- --proxy=172.16.36.90:8083\n\n这样，如果 mock 目录下有定义了接口 /api/hello ，将会转发到 http://172.16.36.90/:8083/api/hello\n\n## 相关资源\n\n- QQ群：568815621\n- vue.js 官网：[https://vuejs.org/](https://vuejs.org/)\n- vue.js 中文网： [http://vuefe.cn/](http://vuefe.cn/)\n- vue-router 文档：[http://router.vuejs.org/zh-cn/index.html/](http://router.vuejs.org/zh-cn/index.html)\n- vuex 文档：[http://vuex.vuejs.org/](http://vuex.vuejs.org/)\n- webpack 文档：[https://webpack.github.io/docs/](https://webpack.github.io/docs/)\n- ES2015 入门教程：[http://es6.ruanyifeng.com/](http://es6.ruanyifeng.com/)\n- scss 文档：[http://sass-lang.com/documentation/file.SASS_REFERENCE.html](http://sass-lang.com/documentation/file.SASS_REFERENCE.html)\n- mocha 文档: [http://mochajs.org/](http://mochajs.org/)\n- express 中文官网：[http://expressjs.com/zh-cn/](http://expressjs.com/zh-cn/) \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanan198501%2Fvue-spa-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhanan198501%2Fvue-spa-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanan198501%2Fvue-spa-template/lists"}