搭建完整的前端工程框架

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安装路径）

 

                注：本人也是新手，所写内容为整理师父所授及自己理解，会逐步完善，若有不妥欢迎指正！