完整的前端工程框架

标签：

1.基础

（1）模式：nodeJS+angularJS+bootstrap+express

（2）软件：webstorm

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

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

（1）new一个nodejs express APP工程

（2）用bower安装需要的包：

         单击webstorm左下角“Terminal”，在输入框里输入如下信息。

        基础安装

         npm install -g bower ↵全局安装bower

         npm install --global gulp ↵安装gulp（可对css、html、js等的代码和img进行压缩）

         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": "FrontEnd_Angular_Demo",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "ali-data-mock": "0.1.3",
    "ali-data-proxy-lite": "1.1.16",
    "body-parser": "~1.13.2",
    "bower": "^1.6.5",
    "cookie-parser": "~1.3.5",
    "crypto": "*",
    "debug": "~2.2.0",
    "ejs": "~2.3.3",
    "express": "~4.13.1",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0"
  },
  "devDependencies": {
    "del": "^2.0.2",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-cache": "^0.4.0",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^2.4.0",
    "gulp-jshint": "^1.12.0",
    "gulp-livereload": "^3.8.1",
    "gulp-load-plugins": "^1.1.0",
    "gulp-minify-css": "^1.2.1",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.0.5",
    "gulp-uglify": "^1.4.2",
    "gulp-watch": "^4.3.5",
    "imagemin-pngquant": "^4.2.0"
  }
}

（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.json（设置压缩）

              >interface.json（前后端接口）

              >package.json（查看安装包）

              >.bowerrc(是自定义bower下载的包的目录）

完整的前端工程框架

标签：

原文地址：http://www.cnblogs.com/luoyishamai/p/4981263.html