완전한 전단 공사 틀을 세우다
(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 설치 경로)
주: 본인도 신출내기입니다. 쓴 내용은 스승님께서 가르쳐 주신 것과 자신의 이해를 정리하는 것입니다. 점차적으로 보완될 것입니다. 만약에 부적절하면 바로잡아 주십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.