완전한 전단 공사 틀을 세우다

3167 단어
1. 기초
(1) 모드: nodeJS+angularJS(페이지 이동, 보기 루트 구현) +bootstrap(html, css, js 공동 작용하는 프레임워크) +express(논리적 루트 쓰기 사용)
(2) 소프트웨어: 웹storm
(3) 도구: bower는 그것으로 필요한bootstrap,angularJS,gulp,jQuery 등의 가방을 설치한다.
2.new 프로젝트로 필요한 패키지를 설치하고 필요한 파일(예를 들어 html, css, js, json)을 설치합니다.                 
(1) new nodejs express APP 프로젝트
(2) 필요한 패키지를 bower로 설치하려면:
웹storm 왼쪽 아래 "Terminal"을 누르면 입력 상자에 다음과 같은 정보를 입력하십시오.
기본 설치
A [cmd에 전역적으로 설치하면 경로가 기본'c:\users\사용자 이름\'에서 새 프로젝트가 있는 디스크로 변경됩니다. 즉, e:\를 입력하면 경로가 E디스크로 바뀝니다.
npm install -g bower 전역 설치 bower
npm install -- 글로벌 gulp 설치gulp(css, html, js 등의 코드와img를 압축할 수 있음)]
B[프로젝트에서 이런 설치
        npm install bower --save-dev
        npm install gulp --save-dev]
C bower install
npm install
필요한 패키지 설치
         bower install angular --save
        bower install  gulp --save
        bower install bootstrap --save
        bower install jquery --save
         ......
bower install xxx -- save
설치된 모든 가방이 패키지에 있습니다.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 설치 경로)
 
주: 본인도 신출내기입니다. 쓴 내용은 스승님께서 가르쳐 주신 것과 자신의 이해를 정리하는 것입니다. 점차적으로 보완될 것입니다. 만약에 부적절하면 바로잡아 주십시오!

좋은 웹페이지 즐겨찾기