└── simple-todo ├── .babelrc ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── CompletedTodos.vue │ ├── CurrentTodos.vue │ └── GetTodo.vue ├── main.js └── store │ └── store.js └── webpack.config.js /simple-todo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /simple-todo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /simple-todo/README.md: -------------------------------------------------------------------------------- 1 | # simple-todo 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /simple-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | simple-todo 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /simple-todo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-todo", 3 | "description": "A Vue.js project", 4 | "author": "Paul Adams", 5 | "private": true, 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.0.0-beta.5", 12 | "vuex": "^2.0.0-rc.5" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-es2015": "^6.13.2", 18 | "cross-env": "^1.0.6", 19 | "css-loader": "^0.23.1", 20 | "file-loader": "^0.8.4", 21 | "vue-loader": "^9.2.2", 22 | "webpack": "^2.1.0-beta.20", 23 | "webpack-dev-server": "^2.1.0-beta.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /simple-todo/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 22 | 23 | 28 | -------------------------------------------------------------------------------- /simple-todo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-adams/simple-todo-tutorial/6bd5e684e9501e5b6284f3dae1722500d1c311fa/simple-todo/src/assets/logo.png -------------------------------------------------------------------------------- /simple-todo/src/components/CompletedTodos.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /simple-todo/src/components/CurrentTodos.vue: -------------------------------------------------------------------------------- 1 | 22 | 42 | -------------------------------------------------------------------------------- /simple-todo/src/components/GetTodo.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /simple-todo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import store from './store/store' 4 | 5 | new Vue({ 6 | el: '#app', 7 | store, 8 | render: h => h(App) 9 | }) 10 | -------------------------------------------------------------------------------- /simple-todo/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | todos: [], 9 | newTodo: '' 10 | }, 11 | mutations: { 12 | GET_TODO(state, todo){ 13 | state.newTodo = todo 14 | }, 15 | ADD_TODO(state){ 16 | state.todos.push({ 17 | body: state.newTodo, 18 | completed: false 19 | }) 20 | }, 21 | EDIT_TODO(state, todo){ 22 | var todos = state.todos 23 | todos.splice(todos.indexOf(todo), 1) 24 | state.todos = todos 25 | state.newTodo = todo.body 26 | }, 27 | REMOVE_TODO(state, todo){ 28 | var todos = state.todos 29 | todos.splice(todos.indexOf(todo), 1) 30 | 31 | }, 32 | COMPLETE_TODO(state, todo){ 33 | todo.completed = !todo.completed 34 | }, 35 | CLEAR_TODO(state){ 36 | state.newTodo = '' 37 | } 38 | }, 39 | actions: { 40 | getTodo({commit}, todo){ 41 | commit('GET_TODO', todo) 42 | }, 43 | addTodo({commit}){ 44 | commit('ADD_TODO') 45 | }, 46 | editTodo({commit}, todo){ 47 | commit('EDIT_TODO', todo) 48 | }, 49 | removeTodo({commit}, todo){ 50 | commit('REMOVE_TODO', todo) 51 | }, 52 | completeTodo({commit}, todo){ 53 | commit('COMPLETE_TODO', todo) 54 | }, 55 | clearTodo({commit}){ 56 | commit('CLEAR_TODO') 57 | } 58 | 59 | }, 60 | getters: { 61 | newTodo: state => state.newTodo, 62 | todos: state => state.todos.filter((todo) => {return !todo.completed}), 63 | completedTodos: state => state.todos.filter((todo) => {return todo.completed}) 64 | } 65 | 66 | }) -------------------------------------------------------------------------------- /simple-todo/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | loaders: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue' 16 | }, 17 | { 18 | test: /\.js$/, 19 | loader: 'babel', 20 | exclude: /node_modules/ 21 | }, 22 | { 23 | test: /\.(png|jpg|gif|svg)$/, 24 | loader: 'file', 25 | query: { 26 | name: '[name].[ext]?[hash]' 27 | } 28 | } 29 | ] 30 | }, 31 | devServer: { 32 | historyApiFallback: true, 33 | noInfo: true 34 | }, 35 | devtool: '#eval-source-map' 36 | } 37 | 38 | if (process.env.NODE_ENV === 'production') { 39 | module.exports.devtool = '#source-map' 40 | // http://vue-loader.vuejs.org/en/workflow/production.html 41 | module.exports.plugins = (module.exports.plugins || []).concat([ 42 | new webpack.DefinePlugin({ 43 | 'process.env': { 44 | NODE_ENV: '"production"' 45 | } 46 | }), 47 | new webpack.optimize.UglifyJsPlugin({ 48 | compress: { 49 | warnings: false 50 | } 51 | }) 52 | ]) 53 | } 54 | --------------------------------------------------------------------------------