資訊專(zhuān)欄INFORMATION COLUMN
摘要：前言這一篇，我們將接著上篇來(lái)完成創(chuàng)建項(xiàng)目文件目錄架構(gòu)?？偨Y(jié)這篇主要是文件和目錄架構(gòu)的東西，讀者務(wù)必運(yùn)行一下完整的項(xiàng)目。因此，下一篇，我們將通過(guò)實(shí)現(xiàn)本地?cái)?shù)據(jù)接口模擬從零開(kāi)始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻
前言
這一篇，我們將接著上篇來(lái)完成創(chuàng)建項(xiàng)目文件、目錄架構(gòu)。
回顧先回顧一下現(xiàn)在項(xiàng)目有哪些東西了：
. ├── app │?? ├── app.vue │?? ├── common │?? │?? ├── img │?? │?? ├── js │?? │?? └── scss │?? ├── index.html │?? ├── index.js │?? ├── router │?? │?? └── index.js │?? └── views │?? └── home │?? └── index.vue ├── .babelrc ├── .eslintrc.js ├── .gitignore ├── package-lock.json ├── package.json ├── postcss.config.js └── webpack.config.js開(kāi)發(fā)
總體看一下創(chuàng)建了哪些東西：
. ├── app │?? ├── api // 放get/post接口 │?? ├── app.vue // vue主文件 │?? ├── common // 放公共靜態(tài)資源 │?? ├── components // 該項(xiàng)目都通用的公用組件 │?? ├── componentsBase // 所有項(xiàng)目都通用的公用組件，之后可以做成npm │?? ├── directives // Vue的directives │?? ├── filters // Vue的filters │?? ├── index.html // 模板文件 │?? ├── index.js // 入口文件 │?? ├── mixins // Vue的mixins │?? ├── router // Vue的路由配置文件夾 │?? ├── store // vue-redux的文件夾，暫時(shí)不用，因?yàn)椴⒉皇撬许?xiàng)目都需要redux的 │?? └── views // 視圖 ├── .babelrc ├── .eslintrc.js ├── .gitignore ├── package-lock.json ├── package.json ├── postcss.config.js └── webpack.config.js
這節(jié)要是一個(gè)一個(gè)放代碼和步驟，會(huì)非常繁瑣可以枯燥，所以我們可以直接看完整版的項(xiàng)目，代碼非常簡(jiǎn)單，一眼掃完的那種，所以直接看項(xiàng)目比我這里詳細(xì)地寫(xiě)會(huì)快很多很多，地址：戳這里>>
幾乎所有的文件夾我都有建markdown文檔，方便大家理解。另外，我也是建議，每個(gè)文件夾都配一份markdown說(shuō)明文檔，這真的很重要?。。?/p>
如果有什么問(wèn)題可以評(píng)論，我看到會(huì)第一時(shí)間回復(fù)的。
總結(jié)這篇主要是文件和目錄架構(gòu)的東西，讀者務(wù)必運(yùn)行一下完整的項(xiàng)目。
運(yùn)行開(kāi)發(fā)環(huán)境npm run dev的過(guò)程中，我們?cè)谡{(diào)試器中會(huì)發(fā)現(xiàn)有一個(gè)接口錯(cuò)誤，并帶有"少年，是不是忘了npm run mock? "的警告。這是因?yàn)樵谑醉?yè)，我們會(huì)有一個(gè)ajax請(qǐng)求，但我們這時(shí)候還沒(méi)創(chuàng)建本地請(qǐng)求模擬數(shù)據(jù)接口的服務(wù)，所以報(bào)錯(cuò)了。
因此，下一篇，我們將通過(guò)koa實(shí)現(xiàn)本地?cái)?shù)據(jù)接口模擬 - 從零開(kāi)始做Vue前端架構(gòu)（4）
項(xiàng)目完整代碼Vue前端架構(gòu)-by 子咻
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/11809.html
摘要：前言這一篇，我們將接著上篇來(lái)完成配置。開(kāi)發(fā)一配置我們采用的方式來(lái)創(chuàng)建。對(duì)了，前提我們需要全局安裝。三配置創(chuàng)建文件，上配置配置總結(jié)這篇不多，就做了三件事，。下一篇我們將創(chuàng)建項(xiàng)目文件目錄架構(gòu)從零開(kāi)始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻 前言 這一篇，我們將接著上篇來(lái)完成配置eslint、babel、postcss。 開(kāi)發(fā) 一、配置eslint 我們采用eslint --init的方式來(lái)創(chuàng)建e...
摘要：前言這一篇，我們將接著上篇來(lái)完成配置。開(kāi)發(fā)一配置我們采用的方式來(lái)創(chuàng)建。對(duì)了，前提我們需要全局安裝。三配置創(chuàng)建文件，上配置配置總結(jié)這篇不多，就做了三件事，。下一篇我們將創(chuàng)建項(xiàng)目文件目錄架構(gòu)從零開(kāi)始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻 前言 這一篇，我們將接著上篇來(lái)完成配置eslint、babel、postcss。 開(kāi)發(fā) 一、配置eslint 我們采用eslint --init的方式來(lái)創(chuàng)建e...
摘要：前言上一篇我們遇到少年，是不是忘了的警告，這一篇我們就來(lái)解決這個(gè)問(wèn)題?？偨Y(jié)通過(guò)實(shí)現(xiàn)前后端分離，并且使用來(lái)更方便的模擬數(shù)據(jù)。下一篇，我們創(chuàng)建發(fā)布環(huán)境下的配置文件，并且看看怎么優(yōu)化產(chǎn)出的代碼的從零開(kāi)始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻 前言 上一篇我們遇到少年，是不是忘了npm run mock?的警告，這一篇我們就來(lái)解決這個(gè)問(wèn)題。 開(kāi)發(fā) 一、安裝包 安裝koa和一系列的包（我們用的是ko...
摘要：那該怎么管理這兩個(gè)不同的項(xiàng)目呢解決子模塊用的的同學(xué)肯定一下子就想到子模塊的知識(shí)了。最后，也希望有想法的同學(xué)還有大佬多多留言，給點(diǎn)建議原文地址從零開(kāi)始做前端架構(gòu)腳手架參考資料官方文檔使用定制前端腳手架別人寫(xiě)的腳手架文件操作相關(guān)文檔子模塊 前言 相信很多人都用過(guò)vue-cli或create-react-app或者類(lèi)似的腳手架。腳手架方便我們復(fù)制，粘貼，或者clone代碼庫(kù)，而且還可以更具用...
摘要：前言想想也已經(jīng)做過(guò)不少架構(gòu)的項(xiàng)目了，有基于，基于，基于，基于的。好了，介紹完畢，接下來(lái)，我就從零開(kāi)始，一步一步建起前后端完全分離的前端架構(gòu)了。 前言 想想也已經(jīng)做過(guò)不少架構(gòu)的項(xiàng)目了，有基于vue，基于react，基于thinkPHP，基于laravel的。 做多了，也就對(duì)現(xiàn)有的架構(gòu)有各種想法，有好的，有壞的，總之，用起來(lái)還是不爽。vue-cli雖然可以很快地構(gòu)建并使用，尤其是vue-c...
閱讀 3683·2023-04-26 02:32
閱讀 4076·2021-11-23 10:05
閱讀 2331·2021-10-08 10:04
閱讀 2777·2021-09-22 16:06
閱讀 3657·2021-09-22 15:27
閱讀 798·2019-08-30 15:54
閱讀 1787·2019-08-30 13:50
閱讀 2737·2019-08-29 13:56
