[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10030":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":17,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":29,"discoverSource":30},10030,"vue2-happyfri","bailicangdu\u002Fvue2-happyfri","bailicangdu","vue2 + vue-router + vuex  入门项目","",null,"JavaScript",10540,2865,302,23,0,2,5,71.5,"MIT License",false,"master",true,[25],"vue","2026-06-12 04:00:48","# 说明\n\n>  非常简单的一个vue2 + vuex的项目，整个流程一目了然，麻雀虽小，五脏俱全，适合作为入门练习。\n\n>  如果对您有帮助，您可以点右上角 \"Star\" 支持一下 谢谢！ ^_^\n\n>  或者您可以 \"follow\" 一下，我会不断开源更多的有趣的项目\n\n>  如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍\n\n>  开发环境 macOS 10.12.3 Chrome 56 nodejs 6.10.0\n\n>  这个项目主要用于 vue2 + vuex 的入门练习，另外推荐一个 vue2 比较复杂的大型项目，覆盖了vuejs大部分的知识点。目前项目已经完成。[地址在这里](https:\u002F\u002Fgithub.com\u002Fbailicangdu\u002Fvue2-elm)\n\n\n## 项目运行（nodejs 6.0+）\n``` bash\n# 克隆到本地\ngit clone https:\u002F\u002Fgithub.com\u002Fbailicangdu\u002Fvue2-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:\u002F\u002Fcangdu.org\u002Fhappyfri\u002F)（请用chrome手机模式预览）\n\n### 移动端扫描下方二维码\n\n\u003Cimg src='https:\u002F\u002Fgithub.com\u002Fbailicangdu\u002Fvue2-happyfri\u002Fblob\u002Fmaster\u002Fsrc\u002Fimages\u002Fdemo.png' width=\"200\" height=\"200\" \u002F>\n\n\n## 路由配置\n```js\nimport App from '..\u002FApp'\n\nexport default [{\n    path: '\u002F',\n    component: App,\n    children: [{\n        path: '',\n        component: r => require.ensure([], () => r(require('..\u002Fpage\u002Fhome')), 'home')\n    }, {\n        path: '\u002Fitem',\n        component: r => require.ensure([], () => r(require('..\u002Fpage\u002Fitem')), 'item')\n    }, {\n        path: '\u002Fscore',\n        component: r => require.ensure([], () => r(require('..\u002Fpage\u002Fscore')), 'score')\n    }]\n}]\n\n```\n\n\n\n## 配置actions\n```js\nimport ajax from '..\u002Fconfig\u002Fajax'\n\nexport default {\n\taddNum({ commit, state }, id) {\n\t\t\u002F\u002F点击下一题，记录答案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\u002F\u002F初始化信息\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\u002F\u002F点击进入下一题\n\t[ADD_ITEMNUM](state, payload) {\n\t\tstate.itemNum += payload.num;\n\t},\n\t\u002F\u002F记录答案\n\t[REMBER_ANSWER](state, payload) {\n\t\tstate.answerid[state.itemNum] = payload.id;\n\t},\n\t\u002F*\n\t记录做题时间\n\t *\u002F\n\t[REMBER_TIME](state) {\n\t\tstate.timer = setInterval(() => {\n\t\t\tstate.allTime++;\n\t\t}, 1000)\n\t},\n\t\u002F*\n\t初始化信息，\n\t *\u002F\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 '.\u002Fmutations'\nimport actions from '.\u002Faction'\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 '.\u002Frouter\u002Frouter'\nimport store from '.\u002Fstore\u002F'\n\nVue.use(VueRouter)\nconst router = new VueRouter({\n\troutes\n})\n\nnew Vue({\n\trouter,\n\tstore,\n}).$mount('#app')\n```\n","这是一个基于 Vue2 + Vue-Router + Vuex 的入门级项目，旨在帮助开发者快速上手 Vue.js 生态系统。项目通过简单的示例展示了如何使用 Vue-Router 进行页面路由管理以及利用 Vuex 实现状态管理，非常适合前端新手学习和练习。其简洁清晰的架构设计使得即使是初学者也能轻松理解整个应用的工作流程。此外，该项目还提供了一个在线演示版本供用户直接体验，并且详细介绍了从环境搭建到代码实现的每一步骤，是个人学习或小型项目开发的理想选择。","2026-06-11 03:26:12","top_topic"]