webpack4手動搭建Vue開發環境實現todoList項目（2）

時間 2019-11-08

標籤 webpack4 webpack 手動搭建 vue 開發環境實現 todolist 項目简体版

原文原文鏈接

前言

在上篇教程中，我用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的功能。。。