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

茉莉灬纯洁的白
1,156 阅读5分钟

前言

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

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

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

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

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

项目效果浏览

教程源代码

avatar
文章
阅读
粉丝