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

相信現(xiàn)在有很多人在用Vue3.0開發(fā)項(xiàng)目，但是很多時(shí)候沒有機(jī)會(huì)從零開始搭建一個(gè)項(xiàng)目，畢竟只有負(fù)責(zé)人才會(huì)有機(jī)會(huì)將框架給我們搭建出來，然后我們?cè)诖嘶A(chǔ)上進(jìn)行業(yè)務(wù)迭代、模塊開發(fā)，今天就一起來從零搭建一個(gè)Vue3.0的最小原型系統(tǒng)，讓人人都具備從零開啟一個(gè)項(xiàng)目的能力。

一、 項(xiàng)目初始化

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

npm?init?vite@latest

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

image-20220212223602320.png

注：前面已寫了Vite相關(guān)文章，可點(diǎn)開鏈接閱讀鞏固好記性不如爛筆頭——Vite篇

二、引入U(xiǎn)I框架

Vite已經(jīng)幫助我們完成了項(xiàng)目的初始化，下一步就是引入U(xiǎn)I框架，畢竟UI框架幫助我們?cè)炝撕芏噍喿?#xff0c;省去了很多工作，提高開發(fā)效率。在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'; //?引入對(duì)應(yīng)的樣式 import?'element-plus/theme-chalk/index.css';const?app?=?createApp(App); app .use(ElementPlus) .mount('#app')

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

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

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

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

安裝對(duì)應(yīng)的vuex包

npm?install?vuex?-S

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

cd?./src mkdir?store cd?./store touch?index.js mkdir?./module cd?./module touch?moduleA.jsimage-20220213000625835.png

在建立好目錄結(jié)構(gòu)后，按照如下文件即可實(shí)現(xiàn)對(duì)應(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），每個(gè)模塊擁有自己的state、mutation、action、getter、甚至是嵌套子模塊//?訪問moduleA的狀態(tài)：store.state.moduleAmodules:?{moduleA} });

（2）moduleA.js文件

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

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

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

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

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

四、引入路由Vue-Router

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

安裝對(duì)應(yīng)的vue-router包

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

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

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

在index.js文件中完善對(duì)應(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;

在main.js中引入router

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

在App.vue文件中使用組件，這樣就可以根據(jù)路由訪問不同內(nèi)容了

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

五、引入自定義插件

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

六、API

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

安裝axios

npm?install?axios?-S

進(jìn)一步封裝axios的請(qǐng)求（封裝方式千萬條，選擇適合自己的就好）

//?/src/utils/request.js import?axios?from?'axios';const?service?=?axios.create({baseURL:?'/api',timeout:?9999 });//?請(qǐng)求攔截器 service.interceptors.request.use(config?=>?{//?做一些請(qǐng)求前的處理，例如添加一些頭信息、token信息等return?config;},error?=>?{return?error;} );//?響應(yīng)攔截器 service.interceptors.response.use(response?=>?{//?根據(jù)響應(yīng)做一些處理，例如將響應(yīng)信息存儲(chǔ)到store中等},error?=>?{return?error;} );export?default?service;

然后在src目錄下建立api文件，里面就是與業(yè)務(wù)邏輯相關(guān)的請(qǐng)求，例如如下所示:

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

至此，已經(jīng)完成了Vue3.0的最小原型系統(tǒng)，然后就可以在此基礎(chǔ)上根據(jù)業(yè)務(wù)需求進(jìn)行迭代。

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

你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開發(fā)“工程師”。寫有《學(xué)習(xí)源碼整體架構(gòu)系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會(huì)寫一篇年度總結(jié)，已經(jīng)寫了7篇，點(diǎn)擊查看年度總結(jié)。
同時(shí)，最近組織了源碼共讀活動(dòng)，幫助3000+前端人學(xué)會(huì)看源碼。公眾號(hào)愿景：幫助5年內(nèi)前端人走向前列。

識(shí)別上方二維碼加我微信、拉你進(jìn)源碼共讀群

今日話題

略。分享、收藏、點(diǎn)贊、在看我的文章就是對(duì)我最大的支持~

總結(jié)

以上是生活随笔為你收集整理的还没搭建过Vue3.x项目？几行代码搞定~的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。