Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bailicangdu/vue2-happyfri
vue2 + vue-router + vuex 入门项目
https://github.com/bailicangdu/vue2-happyfri
vue
Last synced: about 19 hours ago
JSON representation
vue2 + vue-router + vuex 入门项目
- Host: GitHub
- URL: https://github.com/bailicangdu/vue2-happyfri
- Owner: bailicangdu
- License: mit
- Created: 2016-12-08T01:28:47.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-11T08:06:55.000Z (almost 2 years ago)
- Last Synced: 2024-11-27T15:06:55.954Z (15 days ago)
- Topics: vue
- Language: JavaScript
- Homepage:
- Size: 5.12 MB
- Stars: 10,498
- Watchers: 307
- Forks: 2,898
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue2-happyfri - happyfri?style=social) - vue2及vuex的入门练习项目 (Demo示例)
- awesome-vue - vue2-happyfri - vue2及vuex的入门练习项目 (Demo示例)
- awesome-github-vue - vue2-happyfri - vue2及vuex的入门练习项目 (Demo示例)
- awesome-github-vue - vue2-happyfri - vue2及vuex的入门练习项目 (Demo示例)
- awesome - vue2-happyfri - vue2及vuex的入门练习项目 (Demo示例)
README
# 说明
> 非常简单的一个vue2 + vuex的项目，整个流程一目了然，麻雀虽小，五脏俱全，适合作为入门练习。
> 如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^
> 或者您可以 "follow" 一下，我会不断开源更多的有趣的项目
> 如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍
> 开发环境 macOS 10.12.3 Chrome 56 nodejs 6.10.0
> 这个项目主要用于 vue2 + vuex 的入门练习，另外推荐一个 vue2 比较复杂的大型项目，覆盖了vuejs大部分的知识点。目前项目已经完成。[地址在这里](https://github.com/bailicangdu/vue2-elm)
## 项目运行（nodejs 6.0+）
``` bash
# 克隆到本地
git clone https://github.com/bailicangdu/vue2-happyfri.git
# 进入文件夹
cd vue2-happyfri
# 安装依赖
npm install 或 yarn(推荐)
# 开启本地服务器localhost:8088
npm run dev
# 发布环境
npm run build
```
# 效果演示
[demo地址](https://cangdu.org/happyfri/)（请用chrome手机模式预览）
### 移动端扫描下方二维码
## 路由配置
```js
import App from '../App'
export default [{
path: '/',
component: App,
children: [{
path: '',
component: r => require.ensure([], () => r(require('../page/home')), 'home')
}, {
path: '/item',
component: r => require.ensure([], () => r(require('../page/item')), 'item')
}, {
path: '/score',
component: r => require.ensure([], () => r(require('../page/score')), 'score')
}]
}]
```
## 配置actions
```js
import ajax from '../config/ajax'
export default {
addNum({ commit, state }, id) {
//点击下一题，记录答案id，判断是否是最后一题，如果不是则跳转下一题
commit('REMBER_ANSWER', id);
if (state.itemNum < state.itemDetail.length) {
commit('ADD_ITEMNUM', 1);
}
},
//初始化信息
initializeData({ commit }) {
commit('INITIALIZE_DATA');
}
}
```
## mutations
```js
const ADD_ITEMNUM = 'ADD_ITEMNUM'
const REMBER_ANSWER = 'REMBER_ANSWER'
const REMBER_TIME = 'REMBER_TIME'
const INITIALIZE_DATA = 'INITIALIZE_DATA'
export default {
//点击进入下一题
[ADD_ITEMNUM](state, payload) {
state.itemNum += payload.num;
},
//记录答案
[REMBER_ANSWER](state, payload) {
state.answerid[state.itemNum] = payload.id;
},
/*
记录做题时间
*/
[REMBER_TIME](state) {
state.timer = setInterval(() => {
state.allTime++;
}, 1000)
},
/*
初始化信息，
*/
[INITIALIZE_DATA](state) {
state.itemNum = 1;
state.allTime = 0;
},
}
```
## 创建store
```js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
Vue.use(Vuex)
const state = {
level: '第一周',
itemNum: 1,
allTime: 0,
timer: '',
itemDetail: [],
answerid: {}
}
export default new Vuex.Store({
state,
actions,
mutations
})
```
## 创建vue实例
```js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import store from './store/'
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
new Vue({
router,
store,
}).$mount('#app')
```