015 프런트 엔드 빌드 관리

1. 가져 오기 기존의 자원

배경 프로젝트가 상대적으로 복잡, 우리는 0에서 프로젝트를 빌드하지만, 준비 소스의 직접 사용하지 않습니다.

 

E : 우리는 작업 디렉토리로 압축 해제 \ javaProject \ JavaEEProject

아이디어를 사용할 수있는 프로젝트를 엽니 다.

먼저 디렉토리 구조를 엽니 다

2. 설치가 달려있다

당신은 node_modules 폴더가없는 점에 유의해야한다. 그러나 package.json 여전히 우리에 의존하는 데 필요한 모든 정의 :

 

우리는 프로젝트 디렉토리, 유형을 입력, 터미널을 열 필요가 : npm install명령, 당신은 이러한 종속성을 설치할 수 있습니다. 아마 몇 분 정도 걸릴.

 

3. 실행 및 참조

 

package.json 시작 스크립트 구성 파일에 스크립트가 있습니다, 당신은 터미널 아이디어에 명령을 입력 할 수 있습니다 npm run dev또는npm start

 

즉, 기본 포트는 9001입니다. 액세스 : HTTP : // localhost를 : 9001

자동으로 이동합니다 :

 

4. 디렉토리 구조

 

웹팩 : 자바 스크립트의 현대적인 응용 프로그램입니다 정적 포장 모듈 (모듈 Bundler를) . 그리고 뜨거운 배포 프런트 엔드 플러그인 프로젝트를 제공합니다.

5. 통화 관계

우리의 메인 index.html을 사이의 관계를 명확히, main.js, App.vue :

 

理一 아래 :

• index.html을 : HTML 템플릿 파일. 그것은 빈 정의 divID로, app.

• main.js：实例化vue对象，并且通过id选择器绑定到index.html的div中，因此main.js的内容都将在index.html的div中显示。main.js中使用了App组件，即App.vue，也就是说index.html中最终展现的是App.vue中的内容。index.html引用它之后，就拥有了vue的内容（包括组件、样式等），所以，main.js也是webpack打包的入口。

• index.js：定义请求路径和组件的映射关系。相当于之前的<vue-router>

• App.vue中也没有内容，而是定义了vue-router的锚点：<router-view>,我们之前讲过，vue-router路由后的组件将会在锚点展示。

• 最终结论：一切路由后的内容都将通过App.vue在index.html中显示。

• 访问流程：用户在浏览器输入路径，例如：http://localhost:9001/#/item/brand --> index.js(/item/brand路径对应pages/item/Brand.vue组件) --> 该组件显示在App.vue的锚点位置 --> main.js使用了App.vue组件，并把该组件渲染在index.html文件中（id为“app”的div中）