webpack4手动搭建Vue开发环境实现todoList项目（2）-白红宇

前言

在上篇教程中，我用webpack4手动搭建了Vue的开发环境，包括了生产环境和开发环境，不知道能否帮助到大家学习（捂脸）。。。

拖更很久，不好意思，最近辞职了忙于找工作，生活还是有点烦躁的，但是在这里就没必要把负能量传给你们了！！

好了，按照约定，这篇文章我会用上次搭建好的Vue开发环境去实现todoList项目，不过其实重点是教会大家手动搭建Vue开发项目（尴尬脸），毕竟todoList大家肯定是写过的，哈哈！！

所以我们用不一样的方式去写，往复杂去写，本人水平有限，大家参考参考就好！！

好了，开始！！！

Vue项目文件夹

首先，现在根目录下创建src文件夹，然后在开始在里面创建文件夹

好了，现在开始分析一下各个文件夹的作用了

assets用于存放静态资源

components用于存放组件模块

router用于设置vue-router

store用于设置vuex

views用于存放页面

App.vue是我们的主组件，所有页面都是在App.vue下进行切换的

main.js是webpack打包的入口文件

入口文件

main.js是webpack打包的入口文件

以下是main.js的基本配置

Vue主页面

App.vue是Vue项目的主页面，所有的页面都是在App.vue下进行切换的

在main.js里面有一段代码:

import App from './App'

就是在入口文件上引入App.vue页面，通过vue-loader编译得到的主页面

一些全局的样式可以编写在App.vue文件下，这样就不用重复在其他页面上添加了！

基本的App.vue模板

vue-router

接下来我们开始来使用路由vue-router

首先需要安装vue-router，在命令行上运行:

npm i vue-router --save-dev

在router文件夹里面创建文件index.js、routes.js

index.js为vue-router入口文件

在views文件夹下创建相应页面用来做路由的测试

routes.js为vue-router的路由配置文件，配置如下

配置好后在入口文件router/index.js里面引入

import routes from './routes'

运行routes.js配置

export default ()=>{    return new VueRouter({        routes    })}复制代码

最后在webpack打包入口文件main.js里面引入router/index.js进行设置，即可使用vue-router

import createRouter from './router'        const router = createRouter();        new Vue({        el: '#app',        router,        render: h=> h(App),    });复制代码

测试效果，在命令行上运行npm run dev，分别在浏览器上切换路由，如果跳转到对应的页面，即证明vue-router配置成功！！！

vuex

好了，接下来我们开始设置vuex了

首先要安装vuex，在命令行上运行命令

npm i vuex --save-dev

在store文件夹里面分别创建文件

action.js(可以异步执行mutations.js里面的方法)

mutations.js(定义修改state状态的方法,但是必须同步执行方法)

mutations_types.js

state.js(定义vue状态属性)

index.js(入口文件)

开始配置index.js入口文件

最后在webpack打包入口文件main.js里面引入store/index.js进行设置，即可使用vuex

import createStore from './store'const store = createStore();new Vue({    el: '#app',    store,    render: h=> h(App),});复制代码

测试效果，自行定义一个全局状态，然后对状态进行读取和修改，若成功证明配置完成！！！

的更多使用方法可以参考vuex文档

todoList

好了，说完上面的配置，现在开始说todoList

说到todoList，我相信很多人都已经在入门vue的时候会接触到的所以在这里我就不详细说了

todoList就是对事件设置状态，all 、 completed or active,就是如此

todoList实现还是很简单的，但是这里我们就多此一举用vuex来实现吧，这简直就是为了使用vuex而使用vuex

毕竟用来练手嘛，所以没必要讲究太多，我觉得自己的项目多点折腾，这是好事！！嘻嘻。。。

把todoList分为上中下三个组件，然后在在views/todo.vue里面引入组件

定义全局状态

mutations_types.js

//保存添加的数据export const DATASAVE = 'DATASAVE'//筛选全部数据export const DATAALL = 'DATAALL'//筛选完成数据export const DATACOMPLETED = 'DATACOMPLETED'//筛选未完成数据export const DATAACTIVE = 'DATAACTIVE'//获取当前按钮状态export const HASBUTTON = 'HASBUTTON'复制代码

mutations.js

import * as types from './mutations_types.js'export default {    //保存全部数据    [types.DATASAVE](state,data) {        state.todo.push(data.data);    },    //获取全部数据    [types.DATAALL](state) {        let data = state.todo;        state.filterToDo = [];        data.forEach(item => {            state.filterToDo.push(item);        })    },    //获取完成数据    [types.DATACOMPLETED](state) {        let data = state.todo;        state.filterToDo = [];        state.filterToDo = data.filter(item => item.status == 'Completed');    },    //获取未完成数据    [types.DATAACTIVE](state) {        let data = state.todo;        state.filterToDo = [];        state.filterToDo = data.filter(item => item.status == 'Active'|| item.status == 'All') ;    },    //获取当前选中的按钮状态    [types.HASBUTTON](state,data) {        state.status = data.data;    }}复制代码

通过actions.js里面定义方法异步执行mutations方法

import * as types from './mutations_types'export default ({    //保存数据    data_save: ({        commit    },{        data    }) => {        return new Promise((resolve,reject) =>{            commit(types.DATASAVE,{                data            });            resolve(data);        });    },    //筛选all数据    dataall: ({        commit    }) => {        return new Promise((resolve,reject)=>{            commit(types.DATAALL);            resolve();        });    },    //筛选未完成数据    dataactive: ({        commit    }) => {        return new Promise((resolve,reject)=>{            commit(types.DATAACTIVE);            resolve();        })    },    //筛选完成数据    datacompleted: ({        commit    }) => {        return new Promise((resolve,reject) => {            commit(types.DATACOMPLETED);            resolve();        })    },    //获取当前按钮选中状态    hasbutton: ({        commit    },{        data    }) => {        return new Promise((resolve,reject) =>{            commit(types.HASBUTTON,{                data: data            });            resolve();        })    }})复制代码

然后通过this.$store.dispatch()调用方法即可实现todoList的功能。。。

总结

好像实现todoList这里我写得太简陋了(捂脸,尴尬)

其实本篇文章主要是教你们手动搭建Vue项目文件夹的，实现todoList只是顺带的功能，为了验证webpack配置音乐文件的成功我还在主页面里面设置了音乐

好了，结合上篇的教程，你们基本上是学会了用webpack手动搭建Vue运行环境

并且手动配置了vue-router和vuex，也实现了小项目，相信你们是有所收获的，我相信着(强颜欢笑)

感觉这篇教程写得不是很好，有点草草了事的态度。。。

因为最近我也是在求职的道路上，所以精力大多花费在求职上，求职总是会让人心累的！！

好了，这边教程也就完结了，有什么错误或者不足，请大神指出，膜拜各位大佬！！

最后，送给大家一句话：相信明天会更好！