{"id":13509049,"url":"https://github.com/bailicangdu/vue2-happyfri","last_synced_at":"2025-04-10T13:01:42.352Z","repository":{"id":37285810,"uuid":"75890962","full_name":"bailicangdu/vue2-happyfri","owner":"bailicangdu","description":"vue2 + vue-router + vuex  入门项目","archived":false,"fork":false,"pushed_at":"2023-03-11T08:06:55.000Z","size":5373,"stargazers_count":10508,"open_issues_count":27,"forks_count":2900,"subscribers_count":307,"default_branch":"master","last_synced_at":"2025-04-03T08:46:09.346Z","etag":null,"topics":["vue"],"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/bailicangdu.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}},"created_at":"2016-12-08T01:28:47.000Z","updated_at":"2025-04-02T14:39:29.000Z","dependencies_parsed_at":"2024-01-18T04:08:10.806Z","dependency_job_id":"6d8792b3-0cf4-43b7-8952-7b8b8facfa36","html_url":"https://github.com/bailicangdu/vue2-happyfri","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bailicangdu%2Fvue2-happyfri","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bailicangdu%2Fvue2-happyfri/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bailicangdu%2Fvue2-happyfri/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bailicangdu%2Fvue2-happyfri/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bailicangdu","download_url":"https://codeload.github.com/bailicangdu/vue2-happyfri/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248223827,"owners_count":21068069,"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":["vue"],"created_at":"2024-08-01T02:01:02.313Z","updated_at":"2025-04-10T13:01:42.331Z","avatar_url":"https://github.com/bailicangdu.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Demo示例"],"sub_categories":[],"readme":"# 说明\n\n\u003e  非常简单的一个vue2 + vuex的项目，整个流程一目了然，麻雀虽小，五脏俱全，适合作为入门练习。\n\n\u003e  如果对您有帮助，您可以点右上角 \"Star\" 支持一下 谢谢！ ^_^\n\n\u003e  或者您可以 \"follow\" 一下，我会不断开源更多的有趣的项目\n\n\u003e  如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍\n\n\u003e  开发环境 macOS 10.12.3 Chrome 56 nodejs 6.10.0\n\n\u003e  这个项目主要用于 vue2 + vuex 的入门练习，另外推荐一个 vue2 比较复杂的大型项目，覆盖了vuejs大部分的知识点。目前项目已经完成。[地址在这里](https://github.com/bailicangdu/vue2-elm)\n\n\n## 项目运行（nodejs 6.0+）\n``` bash\n# 克隆到本地\ngit clone https://github.com/bailicangdu/vue2-happyfri.git\n\n# 进入文件夹\ncd vue2-happyfri\n\n# 安装依赖\nnpm install 或 yarn(推荐)\n\n# 开启本地服务器localhost:8088\nnpm run dev\n\n# 发布环境\nnpm run build\n```\n\n\n\n# 效果演示\n\n[demo地址](https://cangdu.org/happyfri/)（请用chrome手机模式预览）\n\n### 移动端扫描下方二维码\n\n\u003cimg src='https://github.com/bailicangdu/vue2-happyfri/blob/master/src/images/demo.png' width=\"200\" height=\"200\" /\u003e\n\n\n## 路由配置\n```js\nimport App from '../App'\n\nexport default [{\n    path: '/',\n    component: App,\n    children: [{\n        path: '',\n        component: r =\u003e require.ensure([], () =\u003e r(require('../page/home')), 'home')\n    }, {\n        path: '/item',\n        component: r =\u003e require.ensure([], () =\u003e r(require('../page/item')), 'item')\n    }, {\n        path: '/score',\n        component: r =\u003e require.ensure([], () =\u003e r(require('../page/score')), 'score')\n    }]\n}]\n\n```\n\n\n\n## 配置actions\n```js\nimport ajax from '../config/ajax'\n\nexport default {\n\taddNum({ commit, state }, id) {\n\t\t//点击下一题，记录答案id，判断是否是最后一题，如果不是则跳转下一题\n\t\tcommit('REMBER_ANSWER', id);\n\t\tif (state.itemNum \u003c state.itemDetail.length) {\n\t\t\tcommit('ADD_ITEMNUM', 1);\n\t\t}\n\t},\n\t//初始化信息\n\tinitializeData({ commit }) {\n\t\tcommit('INITIALIZE_DATA');\n\t}\n}\n\n```\n\n\n## mutations\n```js\nconst ADD_ITEMNUM = 'ADD_ITEMNUM'\nconst REMBER_ANSWER = 'REMBER_ANSWER'\nconst REMBER_TIME = 'REMBER_TIME'\nconst INITIALIZE_DATA = 'INITIALIZE_DATA'\nexport default {\n\t//点击进入下一题\n\t[ADD_ITEMNUM](state, payload) {\n\t\tstate.itemNum += payload.num;\n\t},\n\t//记录答案\n\t[REMBER_ANSWER](state, payload) {\n\t\tstate.answerid[state.itemNum] = payload.id;\n\t},\n\t/*\n\t记录做题时间\n\t */\n\t[REMBER_TIME](state) {\n\t\tstate.timer = setInterval(() =\u003e {\n\t\t\tstate.allTime++;\n\t\t}, 1000)\n\t},\n\t/*\n\t初始化信息，\n\t */\n\t[INITIALIZE_DATA](state) {\n\t\tstate.itemNum = 1;\n\t\tstate.allTime = 0;\n\t},\n}\n```\n\n## 创建store\n```js\nimport Vue from 'vue'\nimport Vuex from 'vuex'\nimport mutations from './mutations'\nimport actions from './action'\n\n\nVue.use(Vuex)\n\nconst state = {\n\tlevel: '第一周',\n\titemNum: 1,\n\tallTime: 0,\n\ttimer: '',\n\titemDetail: [],\n\tanswerid: {}\n}\n\nexport default new Vuex.Store({\n\tstate,\n\tactions,\n\tmutations\n})\n```\n\n\n## 创建vue实例\n```js\nimport Vue from 'vue'\nimport VueRouter from 'vue-router'\nimport routes from './router/router'\nimport store from './store/'\n\nVue.use(VueRouter)\nconst router = new VueRouter({\n\troutes\n})\n\nnew Vue({\n\trouter,\n\tstore,\n}).$mount('#app')\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbailicangdu%2Fvue2-happyfri","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbailicangdu%2Fvue2-happyfri","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbailicangdu%2Fvue2-happyfri/lists"}