建立一個好的前端架構(gòu)是開始開發(fā)Web應(yīng)用或網(wǎng)站的一個基本步驟。良好的實踐和編碼常規(guī)是必不可少的，但是結(jié)構(gòu)呢？我們?nèi)绾卧诳煽氐臅r間內(nèi)構(gòu)思一個好的架構(gòu)？但最重要的事情是，我們應(yīng)該從哪里開始？

當我開始思考這個問題時，我意識到一些事情：

我想要一個多頁面項目（一個Web應(yīng)用或網(wǎng)站）；
我希望我的項目支持不同的屏幕尺寸和分辨率，換句話說，我希望它是響應(yīng)式的；
我希望最終產(chǎn)品是可被維護的；
我希望最終產(chǎn)品性能上是出色的；
我希望可以為將來的項目重復使用相同的模板。

my-project
├── .idea                  # 這個是編輯器生成的
├── build                  # Webpack 配置文件放在這里
├── config                 # Vue 基本配置文件放在這里
├── node_modules           # 第三方依賴
├── src                    # 項目源碼（核心文件）
│   ├── assets             # 資源文件（js, css, scss）
│   ├── components         # 所有組件
│   ├── js                 # 自己寫的 js，里面各種工具類方法等
│   ├── mixins             # 混合
│   ├── router             # 路由
│   ├── vuex               # 狀態(tài)管理
│   ├── App.vue            # 根組件
│   └── main.js            # 入口文件
├── static                 # 靜態(tài)資源，一般放 img
├── theme                  # 主題文件，修改的 Element-UI 主題
├── .babelrc               # babel 編譯配置
├── .editorconfig          # 代碼格式
├── .gitignore             # Git 提交忽略的文件配置
├── .postcssrc.js          # 轉(zhuǎn)換 css 的工具配置文件
├── element-variables.css  # Element 全局定義的變量，不明白為啥放這兒
├── index.html             # 主頁模板
├── package-lock.json      # 用來鎖定依賴的版本號（NPM 自動生成）
├── package.json           # 項目基本信息

project
    \css
    \imgs
    \js
        \controllers
            pageOne.js
            pageTwo.js
        \libs
            angular.js
            jquery.js
            analytics.js
        \plugins
            jquery.tooltip.js
            textResize.js
            formValidation.js
        \views
            pageOne.js
            pageTwo.js
    \scss
        \framework
            _core.scss
            _forms.scss
            _input.scss
            _mixins.scss
            _variables.scss
        \layouts
            _all.scss
            _phablets.scss
            _tablets.scss
            _desktop.scss
            _desktop-large.scss
            _retina.scss

            \pageOne
                _all.scss
                _phablets.scss
                _tablets.scss
                _desktop.scss
                _desktop-large.scss
                _retina.scss

            \pageTwo
                _all.scss
                _phablets.scss
                _tablets.scss
                _desktop.scss
                _desktop-large.scss
                _retina.scss
        \libs
            _animate.scss
            _normalize.scss
            _reset.scss
        \plugins
            _jquery.tooltip.scss
            _jquery.fancyInput.scss

文件夾樹注解
imgs

存放所有的圖片文件：.png、.jpg、.jpeg、壁紙等。

示例：icon.png、home-background.jpeg、userAvatar.jpg。

js（主文件夾）

存放.js文件。子文件夾組織情況如下：

\controllers（子文件夾）

存放angular控制器，每一個控制器都有一個與對應(yīng)視圖相同的名字。比如，如果home.html需要一個angular控制器，你可以創(chuàng)建一個像這樣的文件：project\js\controllers\home.js。

示例：home.js、user-registration.js、user-login.js

\libs（子文件夾）

用于存放JavaScript庫，當然這里不包含插件。

示例：jquery-latest.js、angular.js、googleAnalytics.js

\plugins（子文件夾）

插件需要依賴關(guān)系來工作，而庫不需要，這也就是為什么這里創(chuàng)建兩個文件夾的原因。

示例：jquery-fancyInput.js、restangular.js、customPlugin.js、jquery-airport.js

\views（子文件夾）

存放所有表象的東西，每個文件都與對應(yīng)的視圖名稱相同。例如，如果home.html需要一些效果、材料以及插件初始值，你可以創(chuàng)建一個像這樣的文件：project\js\views\home.js。

示例：home-animations.js、user-registration.js、user-login.js、site-animations.js

CSS（主文件夾）

這個文件夾包含了所有從主SCSS文件中生成的CSS。例如home.scss會在該文件中生成對應(yīng)的home.css文件。

\libs（子文件夾）

即使是對CSS文件，我也會區(qū)分庫和插件，這里有些CSS庫例子。

示例：_meyers-reset.scss、_normalize.scss、_animate.scss、_960gridSystem.scss

\plugins（子文件夾）

CSS文件包含于該文件夾中是使JavaScript插件工作的必備風格。

示例：_jquery-fancyInput.scss、_jqueryTooltip.scss

\framework （子文件夾）

我決定在這個目錄中存放scss文件以共享到整個項目頁面，框架子文件將以下面的方式組織：

_variables.scss（項目變量聲明——colors、spacings等）
_mixins.scss（項目mixin聲明——typography、clearfix、animations等）
_forms.scss（自定義表單樣式和重置）
_input.scss（自定義輸入樣式和重置）
\layouts (子文件夾)

這是一個敏感的部分。這個目錄中的文件以這種方式組織：它們涵蓋所有屏幕分辨率、遵循移動第一的原則。所以，你應(yīng)該使用_all.scss聲明你自己的風格。在該文件中的規(guī)格聲明是對所有屏幕尺寸和所有視圖都有效的。如果你希望你的網(wǎng)站適應(yīng)性強的話，就不要僅僅是重寫規(guī)則，為其他屏幕分辨率聲明它們。

文件夾組織結(jié)構(gòu)如下：

phablets (481up) _phablets.scss
tablets and small laptops (768up) _tablets.scss
desktops (1030up) _desktop.scss
desktops with large screens (1204up) _desktop-large.scss
retina displays exceptions (@2x) _retina.scss
這些文件將把握布局異常，被稱為mediaqueries。

請注意：這些文件共享于所有視圖（HTML頁面）。這就是為什么你需要在scss\layouts文件下創(chuàng)建一個新的文件夾以給定一個特定的風格到一個特定的頁面。

---/html/
|---- /index                       
|---- /index/index.html         首頁  
|---- /user/                    與用戶相關(guān)的頁面  
|---- /user/login.html          登錄頁
---/css/
|---- /base.css                 重置瀏覽器樣式    
|---- /page                     邏輯頁面的css
|---- /page/pagename.css        單獨書寫的css
|---- /common.css               css通用樣式庫
---/js/
|---- /lib                      公用組件
|---- /lib/jquery.2.2.3.min.js  調(diào)用jq庫文件 
|---- /page                     邏輯頁面的js
|---- /page/pagename.js         單獨書寫的js
|---- /common.js                公用方法
---/img/
|---- /page                     頁面對應(yīng)的圖片
|---- /page/wap                 手機端圖片夾
|---- /page/wap/wap_icon.png    手機端圖標
|---- /logo.png                 公用圖片