還沒搭建過Vue3.x項目？幾行代碼搞定~

大家好，我是若川。持續組織了6個月源碼共讀活動，感興趣的可以點此加我微信 ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。歷史面試系列

相信現在有很多人在用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框架。

安裝element-plus包

npm?install?element-plus?-S

在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')

全局引入后即可在對應的組件中使用

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

三、引入狀態管理器Vuex

作為Vue的配套內容，Vuex必不可少，其采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。下面就一起引入Vuex。

安裝對應的vuex包

npm?install?vuex?-S

在文件夾下建立對應的文件目錄，按如下指令執行即可構建其最簡單結構

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

image-20220213000625835.png

在建立好目錄結構后，按照如下文件即可實現對應文件中的內容

(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.moduleAmodules:?{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);}}
};

然后在main.js文件中引入該部分內容

//?……
import?{store}?from?'./store';const?app?=?createApp(App);
app
.use(store)
.use(ElementPlus)
.mount('#app')

然后在對應組件中進行使用，具體詳細使用內容可以看此處內容

用最簡的方式學Vuex

四、引入路由Vue-Router

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

安裝對應的vue-router包

npm?install?vue-router@4?-S

在文件夾下建立對應的文件目錄，按如下指令執行即可構建其最簡單結構

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

在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;

在main.js中引入router

//?……
import?router?from?'./router';const?app?=?createApp(App);
app
.use(store)
.use(router)
.use(ElementPlus)
.mount('#app')

在App.vue文件中使用組件，這樣就可以根據路由訪問不同內容了

<script setup>
</script><template><router-view></router-view>
</template>

五、引入自定義插件

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

六、API

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

安裝axios

npm?install?axios?-S

進一步封裝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;

然后在src目錄下建立api文件，里面就是與業務邏輯相關的請求，例如如下所示:

import?service?from?"../utils/request";export?const?testPost?=?data?=>?{return?service({url:?'/base',method:?'post',data});
};

至此，已經完成了Vue3.0的最小原型系統，然后就可以在此基礎上根據業務需求進行迭代。

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助3000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。