Vue3.x最小原型系統(tǒng)實例分析

這篇文章主要介紹了Vue3.x最小原型系統(tǒng)實例分析的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue3.x最小原型系統(tǒng)實例分析文章都會有所收獲，下面我們一起來看看吧。

一、 項目初始化

既然用Vue3.0構(gòu)建最小原型系統(tǒng)，那么肯定要用尤大的最新構(gòu)建工具Vite來進行項目的初始化，初始化指令如下所示：

npm init vite@latest

初始化后的目錄結(jié)構(gòu)如下所示：

二、引入UI框架

Vite已經(jīng)幫助我們完成了項目的初始化，下一步就是引入UI框架，畢竟UI框架幫助我們造了很多輪子，省去了很多工作，提高開發(fā)效率。在Vue3.0中，用的比較多的UI框架有Element Plus，下面就一步步引入該UI框架。

1.安裝element-plus包

npm install element-plus -S

2.在main.js文件中全局引入

import { createApp } from 'vue'
import App from './App.vue'
// 引入element-plus包
import ElementPlus from 'element-plus';
// 引入對應(yīng)的樣式
import 'element-plus/theme-chalk/index.css';

const app = createApp(App);
app
.use(ElementPlus)
.mount('#app')

全局引入后即可在對應(yīng)的組件中使用

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

三、引入狀態(tài)管理器Vuex

作為Vue的配套內(nèi)容，Vuex必不可少，其采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。下面就一起引入Vuex。

1.安裝對應(yīng)的vuex包

npm install vuex -S

2.指令執(zhí)行結(jié)構(gòu)

在文件夾下建立對應(yīng)的文件目錄，按如下指令執(zhí)行即可構(gòu)建其最簡單結(jié)構(gòu)

cd ./src
mkdir store
cd ./store
touch index.js
mkdir ./module
cd ./module
touch moduleA.js

3.實現(xiàn)對應(yīng)文件中的內(nèi)容

在建立好目錄結(jié)構(gòu)后，按照如下文件即可實現(xiàn)對應(yīng)文件中的內(nèi)容

(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的狀態(tài)：store.state.moduleA
    modules: {
        moduleA
    }
});

(2)moduleA.js文件

// module/moduleA.js文件
// 對于模塊內(nèi)部的mutation和getter，接收的第一個參數(shù)是模塊的局部狀態(tài)對象
// 對于模塊內(nèi)部的action，局部狀態(tài)通過context.state暴露出來，根節(jié)點狀態(tài)則為context.rootState
// 對于模塊內(nèi)部的getter，根節(jié)點狀態(tài)會作為第三個參數(shù)暴露出來

// 在帶命名空間的模塊內(nèi)訪問全局內(nèi)容
// 如果希望使用全局state和getter，rootState和rootGetters會作為第三和第四個參數(shù)傳入getter，也會通過context對象的屬性傳入action
// 若需要在全局命名空間內(nèi)分發(fā)action或提交mutation，將{root: true}作為第三個參數(shù)傳給dispatch或commit即可。

export const moduleA = {
    // 默認情況下，模塊內(nèi)部的action、mutation和getter是注冊在全局命名空間的，如果希望模塊具有更高的封裝度和復(fù)用性，可以通過添加namespaced:true的方式使其成為帶命名空間的模塊
    namespaced: true,
    state: {
        testState1: 'xxxx',
        testState2: {
            a: 0,
            b: 1
        },
        testState3: 0
    },
    // 有的時候需要從store中的state中派生出一些狀態(tài)，此時可以將該部分抽象出一個函數(shù)供多處使用。
    // Vuex允許在store中定義getter，像計算屬性一樣，getter的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)他的依賴值發(fā)生了改變才會被重新計算
    getters: {
        // getter接收state作為其第一個參數(shù)
        testGetter1: state => {
            return state.testState1 + state.testState3;
        },
        // getter可以接受其他getter作為第二個參數(shù)
        testGetter2: (state, getters) => {
            return getters.testGetter1.length;
        }
    },
    // 更改Vuex的store中的狀態(tài)的唯一方法是提交mutation，每個mutation都有一個字符串的事件類型和一個回調(diào)函數(shù)，該回調(diào)函數(shù)接收state作為第一個參數(shù)，提交的載荷作為第二個參數(shù)
    // 以相應(yīng)的type調(diào)用store.commit方法來觸發(fā)相應(yīng)的回調(diào)函數(shù)
    // Mutation必須是同步函數(shù)
    mutations: {
        testMutation1(state) {
            // 變更狀態(tài)
            state.testState3++;
        },
        // 第二個參數(shù)是載荷
        testMutation2(state, payload) {
            state.testState1 += payload.content;
        }
    },
    // Action提交的是mutation，而不是直接變更狀態(tài)
    // Action可以包含任意異步操作
    // Action函數(shù)接受一個與store實例具有相同方法和屬性的context對象，因此可以調(diào)用context.commit提交一個mutation，或者通過context.state和context.getters來獲取state和getters。
    // Action通過store.dispatch方法觸發(fā)
    actions: {
        testAction1(context) {
            setTimeout(() => {
                context.commit('testMutation1');
            }, 1000);
        },
        testAction2({commit}, payload) {
            setTimeout(() => {
                commit({
                    type: 'testMutation2',
                    content: payload.content
                });
            }, 1000);
        }
    }
};

4.在main.js文件中引入內(nèi)容

然后在main.js文件中引入上部分內(nèi)容：

然后在對應(yīng)組件中進行使用，具體詳細使用內(nèi)容可以看此處內(nèi)容

// ……
import {store} from './store';

const app = createApp(App);
app
.use(store)
.use(ElementPlus)
.mount('#app')

用最簡的方式學(xué)Vuex

四、引入路由Vue-RouterVue

Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌，下面就在項目中引入Vue-Router。

1.安裝對應(yīng)的vue-router包

npm install vue-router@4 -S

2.在文件夾下建立對應(yīng)的文件目錄，

按如下指令執(zhí)行即可構(gòu)建其最簡單結(jié)構(gòu)

cd ./src
mkdir router
cd ./router
touch index.js

3.在index.js文件中完善對應(yīng)的內(nèi)容

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;

4.在main.js中引入router

// ……
import router from './router';

const app = createApp(App);
app
.use(store)
.use(router)
.use(ElementPlus)
.mount('#app')

5.在App.vue文件中使用組件

這樣就可以根據(jù)路由訪問不同內(nèi)容了

<script setup>
</script>

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

五、引入自定義插件

自定義插件在很多情況下也必要重要，前面已經(jīng)有對應(yīng)章節(jié)闡述了如何自定義插件(Vue3.0插件執(zhí)行原理與實戰(zhàn))，我們僅需要在src下創(chuàng)建plugins目錄放置自己的自定義插件即可。

六、API

純前端項目真的很少，多多少少都會與后端進行交互，當(dāng)前主流項目中與后端常用Axios庫，該庫幫助我們做了很多事情，節(jié)省了很多造輪子的時間(具體Axios使用可以閱讀曾經(jīng)的文章三步法解析Axios源碼)。下面就讓我們一起一步步設(shè)計自己的請求API：

1.安裝axios

npm install axios -S

2.進一步封裝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;
    }
);

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

export default service;

3.src目錄下建立api文件

里面就是與業(yè)務(wù)邏輯相關(guān)的請求，例如如下所示:

import service from "../utils/request";

export const testPost = data => {
    return service({
        url: '/base',
        method: 'post',
        data
    });
};

關(guān)于“Vue3.x最小原型系統(tǒng)實例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue3.x最小原型系統(tǒng)實例分析”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。