zoukankan      html  css  js  c++  java
  • 搭建完整的前端工程框架

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

     

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

     

  • 相关阅读:
    Mac_Homebrew
    Python的路径引用
    OpenTSDB-Writing Data
    OpenTSDB介绍
    Git文件状态描述
    TCollector
    TEXT和BLOB区别
    MySQL索引与Index Condition Pushdown
    webService入门学习(一)
    redis学习笔记(一 基本操作)。
  • 原文地址:https://www.cnblogs.com/luoyishamai/p/4981263.html
Copyright © 2011-2022 走看看