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

秒速五厘米 2022-10-01 05:44 135阅读 0赞

## 前言 ##

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

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

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

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

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

[项目效果浏览][Link 1]

[教程源代码][Link 2]

转载于:https://juejin.im/post/5ce25ab5e51d45109901e7c3

[vuex]: https://link.juejin.im?target=https%3A%2F%2Fvuex.vuejs.org%2Fzh%2Fguide%2Factions.html
[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fwww.molijian.club%2Fwork%2FtodoList%2Findex.html%23%2Ftodo
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FZero-jian%2Fwebpack