VUE 프로젝트 실행중인 프로세스

실행중인 프로세스의 VUE

index.html을 -> main.js -> App.vue -> 라우터 /하는 index.js

1.index.html (프로젝트 항목 페이지)

<! DOCTYPE HTML > 
< HTML > 
< 선두 > 
< 메타 캐릭터 = "UTF-8" > 
< 메타 이름 = "뷰포트" 콘텐츠 = "폭 = 기기 폭 초기 스케일 = 1.0" > 
< 타이틀 > VUE 테스트 </ 타이틀 > 
</ 헤드 > 
< 본문 > 
< DIV ID = "애플리케이션" > 
< 라우터 시청 > </ 라우터 시청 > 
<

</ HTML >

 

2.main.js (코어 파일)

수입 뷰 'VUE'에서 
수입 앱 './App'에서 
가져 오기 라우터 './router' 

Vue.config.productionTip = 거짓 

새로운 뷰 ({ 
엘 '#app', 
라우터, 
구성 요소 : {앱} 
템플릿 : ' < 애플리케이션 /> ' 
})

 

3.App.vue (프로젝트 항목 파일)

<템플릿> 
<DIV ID = "응용 프로그램"> 
<IMG SRC = "./ 자산 / logo.png"> 
<라우터보기 /> 
</ div> 
</ 템플릿> 

<script> 
수출 기본 { 
이름 : '앱' 
}
 </ script> 

<스타일> 
#app { 
글꼴 -family '아브 니르', 돋움, 바탕, 굴림, sans- 리프;
-webkit-font- 스무딩 : 앤티 앨리어싱;
-moz-OSX-font- 스무딩 : 그레이 스케일; 
텍스트 - 정렬 : 센터; 
색상 : # 2c3e50; 
여백 - 상단 : 60 픽셀; 
}
 </ 스타일>

 

4.router -하는 index.js (라우팅 구성 요소)

'VUE'에서 가져 오기 뷰 
에서 수입 라우터 'VUE - 라우터 
에서 수입하여 HelloWorld '@ / 구성 요소 /하여 HelloWorld ' 

Vue.use (라우터) 

수출 기본적  새로운 라우터 ({ 
경로 : [ 
{ 
경로 : '/ ' , 
이름 : '하여 HelloWorld ' , 
성분 :하여 HelloWorld 
} 
] 
})

 

VUE 라우터

그들은 렌더링되는 경우 VUE의 VUE 라우터의 핵심 플러그를 사용 VUE 라우터, 우리는 어셈블리에 경로를 매핑하고 VUE 라우터를 알 수있다