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

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

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

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

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

好了，开始！！！

Vue项目文件夹

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

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

vue-router
vuex

入口文件

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 的更多使用方法可以参考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 ，也实现了小项目，相信你们是有所收获的，我相信着(强颜欢笑)

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

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

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

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

项目效果浏览

教程源代码