一、相關(guān)文件和文件夾的含義：

image.png

build 文件夾: 里面是對(duì) webpack 開發(fā)和打包的相關(guān)設(shè)置，包括入口文件、輸出文件、使用的模塊等；
config 文件夾: 主要是指定開發(fā)和打包中的靜態(tài)資源路徑、要壓縮的文件類型、開發(fā)使用的端口號(hào)、開發(fā)使用虛擬服務(wù)器跨域請(qǐng)求 api 等。
node_modules: 項(xiàng)目的依賴庫；
src 文件夾：我們主要操作的地方，組件的增加修改等都在這個(gè)文件夾里操作，下文會(huì)有詳細(xì)介紹；
static 文件夾: 靜態(tài)資源文件夾，放置不會(huì)變動(dòng)的資源，直接被復(fù)制到最終的打包目錄（默認(rèn)是dist/static）下；
.babelrc: 使用 babel 的配置文件，用來設(shè)置轉(zhuǎn)碼規(guī)則和插件；
.editorconfig: 代碼的規(guī)范文件，規(guī)定使用空格或 tab 縮進(jìn)，縮進(jìn)的長(zhǎng)度是兩位還是四位之類的代碼風(fēng)格，使用的話需要在編輯器里下載對(duì)應(yīng)的插件；
.eslintignore: 指定 eslint 忽略的文件；
.eslintrc: 配置 eslint 的檢測(cè)規(guī)則，強(qiáng)制按照規(guī)則書寫代碼；
.gitignore: 指定 git 忽略的文件，所有 git 操作均不會(huì)對(duì)其生效；
.postcssrc: 指定使用的 css 預(yù)編譯器，里面默認(rèn)配置了 autoprefixer ，自動(dòng)補(bǔ)全瀏覽器前綴；
favicon.ico: 瀏覽器標(biāo)簽頁 title 旁邊的小圖標(biāo)，這是需要我們自己粘貼過來的；
index.html: 首頁文件，項(xiàng)目運(yùn)行的時(shí)候，會(huì)自動(dòng)將我們?cè)?src 文件夾里生成的組件插入這個(gè)文件里；
LICENSE: 項(xiàng)目聲明的 license；
package-lock.json: 當(dāng) node_modules 或 package.json 發(fā)生變化時(shí)自動(dòng)生成的文件。這個(gè)文件主要功能是確定當(dāng)前安裝的包的依賴，以便后續(xù)重新安裝的時(shí)候生成相同的依賴，而忽略項(xiàng)目開發(fā)過程中有些依賴已經(jīng)發(fā)生的更新；
package.json: 指定項(xiàng)目開發(fā)和生成環(huán)境中需要使用的依賴庫；
README.md: 相當(dāng)于是一個(gè)備注文件，對(duì)項(xiàng)目開發(fā)過程中需要注意的地方進(jìn)行一些說明。

src 文件夾結(jié)構(gòu)

image.png

src 文件夾里的文件夾設(shè)置是靈活的，可以根據(jù)自己的習(xí)慣進(jìn)行，不必雷同。下面是這次項(xiàng)目的結(jié)構(gòu)：

assets: 放置靜態(tài)資源，包括公共的 css 文件、 js 文件、iconfont 字體文件、img 圖片文件以及其他資源類文件。之所以強(qiáng)調(diào)是公共的 css 文件，是因?yàn)橐诮M件的 css 標(biāo)簽里加入 ‘scoped‘ 標(biāo)記，將其作用范圍限制在此組件以及調(diào)用它的父級(jí)組件中，避免污染全局樣式；
components: 放置通用模塊組件。項(xiàng)目里總會(huì)有一些復(fù)用的組件，例如彈出框、發(fā)送手機(jī)驗(yàn)證碼、圖片上傳等，將它們作為通用組件，避免重復(fù)工作；
http: 放置與后臺(tái) api 相關(guān)的文件。這里面有 axios 庫的實(shí)例配置文件、使用配置的 axios 實(shí)例接入 api 獲取數(shù)據(jù)的函數(shù)的集合的文件；
mixins: 放置混合選項(xiàng)的文件。具體來說，相當(dāng)于是公用函數(shù)的集合，在組件中引用時(shí)，可以作用于組件而不必書寫重復(fù)的方法；
pages: 放置主要頁面的組件。例如登錄頁、用戶信息頁等。通常是這里的組件本身寫入一些結(jié)構(gòu)，再引入通用模塊組件，形成完整的頁面；
router: 放置路由設(shè)置文件，指定路由對(duì)應(yīng)的組件；
store: 放置 vuex 需要的狀態(tài)關(guān)聯(lián)文件，設(shè)置公共的 state、mutations 等；
App.vue: 入口組件，pages 里的組件會(huì)被插入此組件中，此組件再插入 index.html 文件里，形成單頁面應(yīng)用；
main.js: 入口 js 文件，影響全局，作用是引入全局使用的庫、公共的樣式和方法、設(shè)置路由等。

二、Vuejs+elementUI框架開發(fā)的項(xiàng)目結(jié)構(gòu)及文件關(guān)系

以登錄模塊為例，文件關(guān)系如下：
登錄頁面login/index.vue --> 調(diào)用接口腳本api.js的方法確認(rèn)登錄信息，成功后通過路由配置文件router/index.js跳轉(zhuǎn)到后臺(tái)主頁面Home.vue，Home.vue頁面可以直
接使用路由配置中的屬性（$router.options.routes訪問路由配置文件的屬性）

三、

1、目錄結(jié)構(gòu)
項(xiàng)目是vue項(xiàng)目，但是react其實(shí)也差不多。

config 項(xiàng)目所有的在運(yùn)行前的配置中心
index.js 項(xiàng)目公共前綴，路由前綴，項(xiàng)目名稱等等
dist 打包后目錄（前端這些年約定俗成了）
public 不會(huì)被打包的目錄，一個(gè)是webpack默認(rèn)路徑，另一個(gè)是大家都這么干
config(項(xiàng)目如果是外部js全局變量控制環(huán)境)
img（不被打包的靜態(tài)圖片）
js（不被打包的靜態(tài)js）
index.html webpack入口html文件
src 源碼目錄
assets 靜態(tài)文件目錄，一般放圖片
img
js（不需要被打包的不要放這里，放在外層的public下面）
businessComponents 業(yè)務(wù)組件
Menu(菜單組件)
list.js（菜單組合路由）
layout 頁面上全局布局組件，比如路由嵌套的部分
One.vue（組件）
Two(文件夾)
index.vue
index.js 需要全局注冊(cè)的統(tǒng)一出口
README.md（組件太多需要說明文件）
components 和業(yè)務(wù)無關(guān)的組件
AntDesgin.js(組件庫入口)
Element.js（組件庫入口）
index.js 需要全局導(dǎo)入和注冊(cè)的統(tǒng)一出口
README.md（組件太多需要說明文件）
mixin 全局mixin部分，非全局部分的mixin不建議使用。容易引起代碼混亂
pages 路由相關(guān)頁面部分，原本大家用的是views
Home 首頁
index.vue
Page2
ComTwo 頁面組件更加復(fù)雜了
ComThree.vue 子組件的組件
index.vue 頁面組件入口
ComOne.vue 頁面組件
index.vue 頁面組件入口
404.vue
power 項(xiàng)目業(yè)務(wù)上的權(quán)限管理中心
router 路由部分（不建議把菜單管理也放這里）
before.js(路由守衛(wèi)js，名稱隨意，清晰明確即可)
index.js
service 接口管理中心
index.js
store 數(shù)據(jù)中心,不在和業(yè)務(wù)有關(guān)，主要是為了配置緩存使用
index.js
theme 主題樣式中心，所有全局的css都在這里
index.css(scss,less) 保證你的輸出是一個(gè)出口
tool（utils）工具函數(shù)中心
App.vue 初始模板
CreateApp.js main.js里面會(huì)存在很多業(yè)務(wù)上的邏輯，那么這里封裝下
main.js
.browserslistrc
.eslintrc.js eslint配置
.gitignore
babel.config.js babel配置
package.json
prettier.config.js prettier配置
README.md 項(xiàng)目初始約定，規(guī)范書寫中心
vue.config.js vue打包配置中心，webpack等修改也在這里

2、代碼和目錄結(jié)構(gòu)上的個(gè)人習(xí)慣
遵循原則，能直接復(fù)制的最好。也要遵循歷史規(guī)范

1、css嵌套不超過三層，性能方面的考慮

2、可以直接在div上面寫css，也可以使用父子選擇器等等

3、css名稱多個(gè)字符使用“-”隔開，比如：name-title

4、class類文件首字母大寫（行業(yè)上的基本習(xí)慣了），類函數(shù)名稱首字母大寫

5、組件名稱首字母大寫，采用大駝峰命名：NameTile

6、組件文件目錄則采用組件名稱命名，并且采用大駝峰命名

NameTile
index.vue
7、組件如果是單標(biāo)簽的則必須用目錄名稱或者組件名稱進(jìn)行命名

比如：組件名稱為Test.vue 則使用為<Test />

8、非單標(biāo)簽組件多字符則為<test-name></test-name>方式使用

以上組件命名原則基于復(fù)制直接能用原則，和遵循h(huán)tml規(guī)范和一般框架規(guī)范。不采用eslint強(qiáng)制約定。但是習(xí)慣之后大家會(huì)發(fā)現(xiàn)寫代碼效率會(huì)高很多。因?yàn)榻M件名稱你直接復(fù)制黏貼基本能用了。

9、pages頁面下的文件不要根據(jù)業(yè)務(wù)組件進(jìn)行劃分，一個(gè)路由一個(gè)文件夾。命名比如為目錄加index文件方式。

10、pages下路由頁面文件如下方式使用

pages                 路由相關(guān)頁面部分，原本大家用的是views
    Home              首頁
        index.vue
    Page2
        ComTwo            頁面組件更加復(fù)雜了
            ComThree.vue  子組件的組件
            index.vue     頁面組件入口
        ComOne.vue        頁面組件
        index.vue         頁面組件入口

11、不要再main.js中寫任何業(yè)務(wù)相關(guān)代碼，main.js里面最好能保證只有相關(guān)導(dǎo)入信息

12、個(gè)人會(huì)使用prettier規(guī)范約定代碼習(xí)慣，我其實(shí)很喜歡這個(gè)工具。這樣就能把大家的代碼風(fēng)格統(tǒng)一成一個(gè)

13、代碼不要想著所有人都和你一樣，要跟著項(xiàng)目走。并不是每一個(gè)項(xiàng)目都可以完整的工具鏈。比如小程序。

14、關(guān)于函數(shù)和變量命名大小駝峰都可以，保證字母之間清晰可見就行。比如常量用大寫字符，我個(gè)人是不習(xí)慣的。習(xí)慣上哪怕同一個(gè)字母，我見到的時(shí)候也不一定能看懂。

15、能寫注釋最好都寫注釋

16、覺得文件有需要增加額外說明的時(shí)候添加一個(gè)README.md文件，愿意寫最好啦

二、目錄的組件形成和各個(gè)約定規(guī)范為什么這樣定義
其實(shí)都知道大家不喜歡說教，說自己喜歡什么樣子的就什么樣子。更有甚至說不寫注釋是為了自己不可取代，如果是玩笑那最好。我喜歡我的項(xiàng)目我走了也能一目了然。而不是因?yàn)槟男┠氂械母?jìng)爭(zhēng)力讓代碼很糟糕。所以我有代碼潔癖。目前為止，每一個(gè)和我接觸的同事都說我的項(xiàng)目是讓人心情舒暢的，除非功能非常的復(fù)雜，不然有經(jīng)驗(yàn)?zāi)芰Φ亩寄芎芸焐鲜帧?/p>

1、assets，也可以是static
這個(gè)文件其實(shí)隨著慢慢的發(fā)展沒有什么特殊的存儲(chǔ)了。老時(shí)代的人應(yīng)該會(huì)劃分下面三個(gè)文件夾：js，css，img。

分別存放三個(gè)靜態(tài)資源。但是現(xiàn)在其實(shí)隨著項(xiàng)目的開發(fā)似乎只有img可以存放了。但是依舊建議大家根據(jù)業(yè)務(wù)情況劃分文件夾。css就不必要了，因?yàn)闃I(yè)務(wù)需要被獨(dú)立出來了。

2、businessComponents和components
為什么這么劃分其實(shí)是因?yàn)殡S著業(yè)務(wù)開發(fā)久了，我們的組件其實(shí)應(yīng)該分為組件庫組件和業(yè)務(wù)混合的組件。業(yè)務(wù)混合的比如支付組件彈窗，一些全局級(jí)聯(lián)組件，這些是和業(yè)務(wù)相關(guān)的，你無法拆分到其他項(xiàng)目中使用。如果和非業(yè)務(wù)組件混合在一起，雖然可以，但是不好找。并且一個(gè)有想法的人應(yīng)該會(huì)想著這些非業(yè)務(wù)組件其實(shí)慢慢積累就形成了類似ElementUI之類的組件庫。

3、mixin
雖然都不提倡使用mixin，畢竟這玩意是全局污染的，如果編輯器不給力，你真不好找定義在哪。但是如果有的話請(qǐng)放在這里。

4、pages（views）
1、為什么不用view文件了呢？主要是小程序的影響，這樣看著更加直觀。

2、然后為什么不采用業(yè)務(wù)模塊劃分路由文件呢？

是因?yàn)槟愕捻撁鎸?shí)際上和業(yè)務(wù)關(guān)系確實(shí)很大，但是路由實(shí)際上是業(yè)務(wù)無關(guān)的是可以隨意組合成為一個(gè)新的業(yè)務(wù)組合，那如果你早期根據(jù)業(yè)務(wù)嚴(yán)格劃分了路由文件。后期又要拆怎么辦呢？那不就亂套了。所以感覺一個(gè)路由一個(gè)文件。不要層層嵌套了

3、關(guān)于文件和組件的劃分主要是為了讓結(jié)構(gòu)更加清晰。所有東西堆在一起頁面小還好，多了就很麻煩了

5、power
這個(gè)文件沒有嚴(yán)格的劃分，你也可以放在業(yè)務(wù)組件中或者其他。我提出來的原因是因?yàn)檫@個(gè)是全局影響的，必定是處于業(yè)務(wù)最上層的。

6、router
大家應(yīng)該都差不多這么干，但是我看很多開源的組件庫之類的會(huì)把router和菜單配置結(jié)合在一起。然后把路由守衛(wèi)等提取到另一個(gè)文件下面去。

這里最大的問題是你的路由和頁面嚴(yán)重耦合，有些甚至為了路由的簡(jiǎn)化書寫，采用上層名稱和下層名稱相互結(jié)合形成一個(gè)新的路由。但是你們要想想后端一般怎么權(quán)限配置的，是不是就一個(gè)路徑就行了。然后后端返回的時(shí)候是全路徑，那么你就很痛苦了。因?yàn)槟銦o法清晰的把控頁面路徑是什么。并且路由沖突的可能性會(huì)加劇。所以我這個(gè)文件夾只是做路由在代碼層面的注冊(cè)就行了。別和業(yè)務(wù)嚴(yán)重耦合了，后端可不會(huì)說遷就前端來做東西。小公司前端豈不是更加！

7、store
個(gè)人做法：作為前端的數(shù)據(jù)庫（就像以前后臺(tái)會(huì)在數(shù)據(jù)庫寫存儲(chǔ)過程書寫業(yè)務(wù)邏輯，但是現(xiàn)在不需要了），只做數(shù)據(jù)緩存，并且結(jié)合插件融合storege緩存。只做數(shù)據(jù)緩存，并且統(tǒng)一全局的緩存操作。不允許其他頁面獨(dú)立api操作緩存函數(shù)。

這個(gè)就有的說到了，需要講講歷史了。

A、先說說大家都怎么干的

1、umi.js（react框架）：redux等等

2、vue：vuex

一般都采用這個(gè)文件夾作為一個(gè)全局的數(shù)據(jù)共享中心。其實(shí)說一句vue做的不是很好的地方在于大家一開始就用錯(cuò)方式了。react實(shí)際上是每個(gè)業(yè)務(wù)文件都會(huì)有一個(gè)store.js文件。這是為了提取公共的部分，為了避免react一些性能問題和數(shù)據(jù)聚合共享方面的方式所以每個(gè)文件下面一個(gè)。

到了vue的時(shí)候大家覺得放在全局很好。但是把和業(yè)務(wù)嚴(yán)重耦合部分放在全局真的很不優(yōu)雅。層次這么高，容易讓人覺得這個(gè)數(shù)據(jù)是可以大范圍共享的。實(shí)際上僅僅是為了一個(gè)業(yè)務(wù)需要而做的。

B、新的api和數(shù)據(jù)共享方式讓store的職能越來越無用

1、react：hooks的出現(xiàn)，provide使用

2、vue：vue.observable，provide，hooks

3、js文件內(nèi)存緩存機(jī)制

這里每一種都可以讓store這種方式被取代，并且讓數(shù)據(jù)共享和緩存更好的和業(yè)務(wù)相互嵌合。更加優(yōu)雅，并且不會(huì)增加首屏的加載速度

所以我把store定義成了一個(gè)前端數(shù)據(jù)庫，一個(gè)只做數(shù)據(jù)全局緩存的地方。并且統(tǒng)一緩存操作，把混亂的localStorge等等緩存操作統(tǒng)一化。那么結(jié)構(gòu)就更加清晰了

8、theme（主題）
這里其實(shí)最早是從assets的css文件夾提出來的。因?yàn)槲覀儠?huì)有很多公共的css樣式需要全局使用。或者需要scss等的函數(shù)，還有存在全局換膚等等。那么提出來，會(huì)更加直觀。

9、tool（utils）
工具函數(shù)集合，沒啥好講的

10、App.vue，CreateApp.js，main.js
主要是講下main.js和CreateApp.js

不管新手老手，都喜歡把指令啊，工具函數(shù)啊都放在main.js但是入口文件很有必要保持一個(gè)清晰的結(jié)構(gòu)。入口文件就像package.json一樣，應(yīng)該讓人一眼可以清晰的知道這個(gè)項(xiàng)目的依賴情況還有基本入口的。搞那么多業(yè)務(wù)工具職責(zé)就亂了。

三、原則總結(jié)
1、這樣劃分的原因是為了項(xiàng)目更加直觀簡(jiǎn)單，不讓讓接手的人耗費(fèi)在無意義的項(xiàng)目結(jié)構(gòu)熟悉上

2、做到復(fù)制的是什么，你用的時(shí)候就是什么，代碼效率提升很大

3、規(guī)范跟著項(xiàng)目走，一刀切容易讓人反感。

個(gè)人比較推薦使用webstorm開發(fā)，這恐怕是老時(shí)代的人更加喜歡一些。要不是這貨收費(fèi)，vscode就沒有什么事情了。不管是性能，開發(fā)效率上webstorm上完爆。僅僅是定義跳轉(zhuǎn)這件事上就完爆。

四、

vue-element-admin的src文件夾目錄結(jié)構(gòu)分析
1.api:各種接口請(qǐng)求
2.assets:存放靜態(tài)資源
3.components:通用組件
4.directive:自定義指令
5.filters:自定義過濾器
6.icons:圖標(biāo)組件
7.layout:布局組件
8.router:路由配置
9.store:狀態(tài)管理
10.styles:自定義樣式
11.utils:通用工具方法
11.1.auth.js: token存取
11.2.permission.js:權(quán)限檢查
11.3.request.js:axios的二次封裝(重點(diǎn))
11.4.index.js:工具方法
12.views:頁面(業(yè)務(wù)組件)
13.permission.js:登錄認(rèn)證和路由跳轉(zhuǎn)(重點(diǎn))
14.setting.js:全局配置
15.main.js:全局入口文件
16.App.vue:全局入口組件

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

項(xiàng)目結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu)

一、相關(guān)文件和文件夾的含義：

二、Vuejs+elementUI框架開發(fā)的項(xiàng)目結(jié)構(gòu)及文件關(guān)系

三、

四、

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

項(xiàng)目結(jié)構(gòu)

一、相關(guān)文件和文件夾的含義：

二、Vuejs+elementUI框架開發(fā)的項(xiàng)目結(jié)構(gòu)及文件關(guān)系

三、

四、

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

三、