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

前言

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

拖更好久，很差意思，最近辞职了忙于找工做，生活仍是有点烦躁的，可是在这里就不必把负能量传给大家了！！vue

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

因此咱们用不同的方式去写，往复杂去写，本人水平有限，你们参考参考就好！！git

好了，开始！！！github

Vue项目文件夹

首先，如今根目录下建立src文件夹，而后在开始在里面建立文件夹web

好了，如今开始分析一下各个文件夹的做用了vue-router

• assets用于存放静态资源
• components用于存放组件模块
• router用于设置vue-router
• store用于设置vuex
• views用于存放页面
• App.vue是咱们的主组件，全部页面都是在App.vue下进行切换的
• main.js是webpack打包的入口文件

入口文件

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

如下是main.js的基本配置npm

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，也实现了小项目，相信大家是有所收获的，我相信着(强颜欢笑)

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

由于最近我也是在求职的道路上，因此精力大多花费在求职上，求职老是会让人心累的！！

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

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

项目效果浏览

教程源代码