瞧，Vue3.x最小原型系統就是這麼簡單

執鳶者發表於2022-02-15
Vue原型
相信現在有很多人在用Vue3.0開發專案，但是很多時候沒有機會從零開始搭建一個專案，畢竟只有負責人才會有機會將框架給我們搭建出來，然後我們在此基礎上進行業務迭代、模組開發，今天就一起來從零搭建一個Vue3.0的最小原型系統，讓人人都具備從零開啟一個專案的能力。

一、 專案初始化

既然用Vue3.0構建最小原型系統，那麼肯定要用尤大的最新構建工具Vite來進行專案的初始化，初始化指令如下所示：
npm init vite@latest
初始化後的目錄結構如下所示：

image-20220212223602320.png

注：前面已寫了Vite相關文章，可點開連結閱讀鞏固好記性不如爛筆頭——Vite篇

二、引入UI框架

Vite已經幫助我們完成了專案的初始化，下一步就是引入UI框架，畢竟UI框架幫助我們造了很多輪子，省去了很多工作，提高開發效率。在Vue3.0中，用的比較多的UI框架有Element Plus，下面就一步步引入該UI框架。
  1. 安裝element-plus包
npm install element-plus -S
  1. 在main.js檔案中全域性引入
import { createApp } from 'vue'
import App from './App.vue'
// 引入element-plus包
import ElementPlus from 'element-plus';
// 引入對應的樣式
import 'element-plus/theme-chalk/index.css';

const app = createApp(App);
app
.use(ElementPlus)
.mount('#app')
  1. 全域性引入後即可在對應的元件中使用

注：除了全域性引入元件外，還可以引入部分元件，從而減少打包體積。

三、引入狀態管理器Vuex

作為Vue的配套內容，Vuex必不可少，其採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。下面就一起引入Vuex。
  1. 安裝對應的vuex包
npm install vuex -S
  1. 在資料夾下建立對應的檔案目錄，按如下指令執行即可構建其最簡單結構
cd ./src
mkdir store
cd ./store
touch index.js
mkdir ./module
cd ./module
touch moduleA.js

image-20220213000625835.png

  1. 在建立好目錄結構後，按照如下檔案即可實現對應檔案中的內容

(1) index.js檔案

// index.js檔案
import {createStore} from "vuex";

import {moduleA} from "./module/moduleA";

export const store = createStore({
    // Vuex允許將store分割成模組（module），每個模組擁有自己的state、mutation、action、getter、甚至是巢狀子模組
    // 訪問moduleA的狀態：store.state.moduleA
    modules: {
        moduleA
    }
});

（2）moduleA.js檔案

// module/moduleA.js檔案
// 對於模組內部的mutation和getter，接收的第一個引數是模組的區域性狀態物件
// 對於模組內部的action，區域性狀態通過context.state暴露出來，根節點狀態則為context.rootState
// 對於模組內部的getter，根節點狀態會作為第三個引數暴露出來

// 在帶名稱空間的模組內訪問全域性內容
// 如果希望使用全域性state和getter，rootState和rootGetters會作為第三和第四個引數傳入getter，也會通過context物件的屬性傳入action
// 若需要在全域性名稱空間內分發action或提交mutation，將{root: true}作為第三個引數傳給dispatch或commit即可。

export const moduleA = {
    // 預設情況下，模組內部的action、mutation和getter是註冊在全域性名稱空間的，如果希望模組具有更高的封裝度和複用性，可以通過新增namespaced:true的方式使其成為帶名稱空間的模組
    namespaced: true,
    state: {
        testState1: 'xxxx',
        testState2: {
            a: 0,
            b: 1
        },
        testState3: 0
    },
    // 有的時候需要從store中的state中派生出一些狀態，此時可以將該部分抽象出一個函式供多處使用。
    // Vuex允許在store中定義getter，像計算屬性一樣，getter的返回值會根據它的依賴被快取起來，且只有當他的依賴值發生了改變才會被重新計算
    getters: {
        // getter接收state作為其第一個引數
        testGetter1: state => {
            return state.testState1 + state.testState3;
        },
        // getter可以接受其他getter作為第二個引數
        testGetter2: (state, getters) => {
            return getters.testGetter1.length;
        }
    },
    // 更改Vuex的store中的狀態的唯一方法是提交mutation，每個mutation都有一個字串的事件型別和一個回撥函式，該回撥函式接收state作為第一個引數，提交的載荷作為第二個引數
    // 以相應的type呼叫store.commit方法來觸發相應的回撥函式
    // Mutation必須是同步函式
    mutations: {
        testMutation1(state) {
            // 變更狀態
            state.testState3++;
        },
        // 第二個引數是載荷
        testMutation2(state, payload) {
            state.testState1 += payload.content;
        }
    },
    // Action提交的是mutation，而不是直接變更狀態
    // Action可以包含任意非同步操作
    // Action函式接受一個與store例項具有相同方法和屬性的context物件，因此可以呼叫context.commit提交一個mutation，或者通過context.state和context.getters來獲取state和getters。
    // Action通過store.dispatch方法觸發
    actions: {
        testAction1(context) {
            setTimeout(() => {
                context.commit('testMutation1');
            }, 1000);
        },
        testAction2({commit}, payload) {
            setTimeout(() => {
                commit({
                    type: 'testMutation2',
                    content: payload.content
                });
            }, 1000);
        }
    }
};
  1. 然後在main.js檔案中引入該部分內容
// ……
import {store} from './store';

const app = createApp(App);
app
.use(store)
.use(ElementPlus)
.mount('#app')
  1. 然後在對應元件中進行使用，具體詳細使用內容可以看此處內容

用最簡的方式學Vuex

四、引入路由Vue-Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌，下面就在專案中引入Vue-Router。
  1. 安裝對應的vue-router包
npm install vue-router@4 -S
  1. 在資料夾下建立對應的檔案目錄，按如下指令執行即可構建其最簡單結構
cd ./src
mkdir router
cd ./router
touch index.js
  1. 在index.js檔案中完善對應的內容
import {createRouter, createWebHashHistory} from 'vue-router';

const routes = [
    {
        path: '/',
        redirect: '/component1'
    },
    {
        path: '/component1',
        name: 'component1',
        component: () => import('../components/Component1.vue')
    },
    {
        path: '/component2',
        name: 'component2',
        component: () => import('../components/Component2.vue')
    }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;
  1. 在main.js中引入router
// ……
import router from './router';

const app = createApp(App);
app
.use(store)
.use(router)
.use(ElementPlus)
.mount('#app')
  1. 在App.vue檔案中使用<router-view></router-view> 元件，這樣就可以根據路由訪問不同內容了
<script setup>
</script>

<template>
  <router-view></router-view>
</template>

五、引入自定義外掛

自定義外掛在很多情況下也必要重要，前面已經有對應章節闡述瞭如何自定義外掛（Vue3.0外掛執行原理與實戰)，我們僅需要在src下建立plugins目錄放置自己的自定義外掛即可。

六、API

純前端專案真的很少，多多少少都會與後端進行互動，當前主流專案中與後端常用Axios庫，該庫幫助我們做了很多事情，節省了很多造輪子的時間（具體Axios使用可以閱讀曾經的文章三步法解析Axios原始碼)。下面就讓我們一起一步步設計自己的請求API：
  1. 安裝axios
npm install axios -S
  1. 進一步封裝axios的請求（封裝方式千萬條，選擇適合自己的就好）
// /src/utils/request.js
import axios from 'axios';

const service = axios.create({
    baseURL: '/api',
    timeout: 9999
});

// 請求攔截器
service.interceptors.request.use(
    config => {
        // 做一些請求前的處理，例如新增一些頭資訊、token資訊等
        return config;
    },
    error => {
        return error;
    }
);

// 響應攔截器
service.interceptors.response.use(
    response => {
        // 根據響應做一些處理，例如將響應資訊儲存到store中等
    },
    error => {
        return error;
    }
);

export default service;
  1. 然後在src目錄下建立api檔案，裡面就是與業務邏輯相關的請求，例如如下所示:
import service from "../utils/request";

export const testPost = data => {
    return service({
        url: '/base',
        method: 'post',
        data
    });
};
至此，已經完成了Vue3.0的最小原型系統，然後就可以在此基礎上根據業務需求進行迭代。

相關文章