[ VueJS 03 ] Vue js 프로젝트 생성 (Vue 기초)

[ Vue 03 ] Vue js 프로젝트 생성 (Vue 기초)

안녕하세요. 코드부기입니다.

Vue프로젝트를 생성하는 방식은 되게 간단합니다. Vue는 명령어를 제공하고 있으므로
Vue-cli를 통해서 Vue프로젝트를 생성할 수 있습니다.

일단 모두 Vue를 이용하여 프로젝트를 생성하는 방법에 대해 알아봅시다.

[ Vue 프로젝트 생성 ]

다음의 vue 명령어를 통해서 원하는 해당 디렉토리에 Vue 프로젝트를 생성합시다.

위 Cli명령어를 입력하면 Vue프로젝트의 상세설정을 하게 됩니다.

그 후 해당경로에서 shell을 킨 후에 

npm start 명령어를 실행하게 되면 

다음과 같이 실행이 됩니다.

그럼 http://localhost:8080에 접속하게 되면 다음과 같은 화면을 볼 수 있습니다.






참고로 아까 우리가 쳤던 명령어인 npm start는 어플리케이션을 개발모드로 실행하게 됩니다. 따라서 배포 모드로 빌드하기 위해서는 npm run build 명령어를 따로 입력해주도록 합시다. 그러면 배포 모드의 파일이 /dist라는 폴더 경로 상에 만들어집니다.

그럼 파일을 한번 살펴봅시다.

[ package.json ] 파일

다음은 package.json의 파일입니다. 프로젝트가 생성되면 해당 경로상에 저절로 생성되는 파일입니다.

...

"scripts": {

"dev" : "webpack-dev-server--inline--progress--config build/webpack.dev.conf.js",

"start" : "npm run dev"

...

이 부분을 한번 살펴보시죠.

npm start를 실행하게 되면 npm run dev가 실행되게 되고 자동으로

dev옆에 있는 js파일이 실행되게 되죠.

webpack.dev.conf.js는 webpack의 설정파일입니다. 개발모드로 실행되었기 때문에

webpack.dev.conf.js 웹팩 설정파일이 실행되게 될 것입니다.

[ index.html ] 파일

이 파일은 base파일입니다. 기반이 되는 파일이죠.

다음 body태그 안에 div태그의 id가 app인 부분이 보이시죠. 빌드가 되면 자동으로 그 태그안에 Vue 컴포넌트들이 마운트됩니다. 

마운트가 되는 이유는 main.js라는 파일에서 

new Vue

({ el: '#app', 

router, 

components: { App }, 

template: '<App/>' 

})

인 부분이 있습니다. 자세히 살펴보자면,

main.js는 새로운 vue 인스턴스를 생성하게 됩니다. 그리고 element요소의 #app을 통해서 id가 app인 부분에 마운트가 됩니다. 그리고 마운트가 되는 컴포넌트는 <App/>이라는 템플릿을 가지고 있는 컴포넌트입니다.

App이라는 컴포넌트는 프로젝트 경로 상에서 App.vue라는 이름의 컴포넌트 파일입니다.

그 안에 내용을 통해서 다음과 같이 localhost:8080을 url에 입력했을 시에 

다음과 같은 화면이 뜨는 이유가 됩니다.

[ router/index.js ] 파일 

여기안에 입력될 코드는 바로 vue-router에서 사용될 라우터들이 입력될 것입니다.

다음시간에는 Vue에 관한 간단한 문법에 대해 살펴보겠습니다.

감사합니다.