搭建完整的前端工程框架

1.基礎

（1）模式：nodeJS+angularJS（實現頁面跳轉，視圖路由）+bootstrap（html、css、js共同做用下的框架）+express（用於寫邏輯路由）

（2）軟件：webstorm

（3）工具：bower 用它裝須要的bootstrap、angularJS、gulp、jQuery等包。

2.new一個工程，裝上所需包，及安裝所需文件（如html、css、js、json）。                  

（1）new一個nodejs express APP工程(工程名字是英文，且單詞間用-鏈接，如「http-monitor」)

（2）用bower安裝須要的包：

         單擊webstorm左下角「Terminal」，在輸入框裏輸入以下信息。

        基礎安裝

    A [若 在cmd裏全局安裝，路徑由默認的「c：\users\用戶名\」改爲新project所在磁盤，即輸入e:↵,路徑變成E盤

         npm install -g bower ↵全局安裝bower

         npm install --global gulp ↵安裝gulp（可對css、html、js等的代碼和img進行壓縮）]

  B[ 在項目裏這種安裝

        npm install bower --save-dev

        npm install gulp --save-dev]

    C bower install ↵（bower安裝庫文件，若出現no bower.json present錯誤，輸入bower init ）

         npm install↵（npm安裝nodeJS所需文件）

         安裝所需文件包

         bower install angular --save

        bower install  gulp --save

        bower install bootstrap --save

        bower install jquery --save

         ......

       bower install xxx --save(用bower安裝的寫法)

       全部安裝好的包都在package.json裏顯示，以下。

{
  "name": "demo",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {

  },
  "devDependencies": {

  }
}

　　

（3）必需的文件（此處用✉表示文件夾）

              工程目錄

              >✉ bin>www(js格式，定義瀏覽器運行端口，如3000。)

              >✉node modules(用bower安裝的全部庫文件。)

              >✉proxy>Data proxy.js(代理服務器，隱藏真實身份等。)

              >✉public>✉apps>✉dist>✉css

                                                          ✉js

                                                          ✉img

                                           >✉dist-gulp（包含與dist文件夾相同的文件的壓縮版，如css、img、js）

                                           >✉libs（包含angular組件）

                                          >✉src>✉controller>controller.js(將數據綁定顯示在瀏覽器上)

                                                     >✉service>service.js(多個請求可分開寫，去服務器獲取數據，語法包含異步請求)

                                          >✉views>.html

                                          >angularRoute.js(配路由，實現頁面跳轉)

                              >✉bower_components

              >✉routes>user.js(處理登陸等的加密、解密問題)

                               >index.js(首頁，通常爲登陸先後狀態設置)

              >✉views  >.html（寫js、css等的引入）

            >app.js

              >bower.json（定義依賴關係）

              >gulpfile.js（設置壓縮） 注：新clone的使用gulp的工程，需運行gulpfile.js，下載✉dist-gulp。

              >interface.json（先後端接口）

              >package.json（查看安裝包及其版本）

              >.bowerrc(是自定義bower_components安裝路徑）

 

                注：本人也是新手，所寫內容爲整理師父所授及本身理解，會逐步完善，如有不妥歡迎指正！