'vue-cli'에 해당하는 글 3건

import Vue

Programming/Vue.js 2021. 8. 20. 02:15

vue create 로 vue 프로젝트를 생성했을 때, 자동으로 생성된 파일들 중 뭔가 중요해 보이는 파일들을 살펴 보았다.

 

  • public/index.html
  • src/main.js
  • src/App.vue
  • src/components/HelloWorld.vue

 

 

1. public/index.html 

 

<html lang="">
    <head>
        ...
    </head>
    <body>

    <div id="app"></div>

    </body>
</html>

 

vue-cli-service serve 명령으로 보았다시피 Welcome Vue 웹사이트를 확인하였는데, 이 때의 템플릿이 public/index.html 파일이며 html-webpack-plugin 라이브러리로 처리된다. 빌드시 JS / CSS 등이 자동으로 삽입되며, webpack.config.js 파일을 생성하여 템플릿 관련 여러가지 설정 변경이 가능하다. (기본 템플릿 파일 및 타이틀 변경 등...) 이 파일에서 중요한 한 줄은,

 

<div id="app"></div>

 

이 html 파일은 body 안에 div 태그 한 줄만 있는 것을 보니, 레이아웃 보다는 정적 리소스를 관리하는 템플릿이다. 이 div 태그 하나에 앞으로 많은 컴포넌트들이 보여질 것이다.

 

 

2. src/main.js

 

어플리케이션의 시작점이 되는 파일이며, Vue 를 초기화하여 index.html 의 태그(#app) 에 삽입하는 코드가 들어 있다.

 

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

 

vue3 로 오면서 코드가 아주 조금 간단(?)해졌다. Vue 어플리케이션에 App 컴포넌트를 가져와서 #app 에 붙이는 코드이다. createApp 에 전달된 App 컴포넌트는 루트 컴포넌트가 된다. Vue 어플리케이션을 생성하는 이 파일에 추가적으로 자주 사용할 전역 컴포넌트나 부가적인 Vue 라이브러리를 등록할 수도 있다.

 

 

3. src/App.vue

 

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
    name: 'App',
    components: {
        HelloWorld
    }
}
</script>

<style>
...
</style>

 

루트 컴포넌트에서는 다른 컴포넌트들을 트리형태로 계속해서 추가하여 사용할 수 있다. <template> 태그 안에는 기존의 html 태그와 동일하게 작성할 수 있으며 <HelloWorld> 태그 자리에는 해당 컴포넌트의 html 태그들이 삽입될 것이다. <script> 태그 안에는 HelloWorld 컴포넌트 태그를 사용할 수 있도록 명시하였다. 컴포넌트는 기존의 html 파일과 마찬가지로 html 태그, js, css 등도 여전히 사용할 수 있으며 재사용이 가능하다.

 

 

 

Vue 프로젝트는 이와 같은 구조로 .vue 컴포넌트만 열심히 만들면 된다.

 

빌드(vue-cli-service serve) 하게 되면 브라우저에서 vue 프로젝트를 확인할 수 있다. 기본 웹페이지에서 devtool 등을 이용하여 네트워크 resource 를 나열해 보면, index.html 템플릿과 vue 파일로 작성된 코드들이 js 파일(app.js, chunk-vendors.js 등)로 번들링(webpack) 되어 동작하는 것을 확인할 수 있다.

 


WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret

 

vue create 명령으로 생성된 node_modules 와 package.json 을 살펴본다. 

 

package.json 파일에는 프로젝트 정보 및 scripts, dependencies, devDependencies 등의 속성이 기본적으로 포함되어 있다.

 

  • scripts : 주로 사용할 명령어 모음
  • dependencies : 해당 모듈에 필요한 라이브러리 모음 (프로덕션 환경)
  • devDependencies : 해당 모듈에 필요한 라이브러리 모음 (개발 및 테스트 환경)

 

 

1. dependencies / devDependencies 속성

 

디펜던시는 우리말로 의존성, 종속성이라고 한다. 라이브러리로 생각하면 편하지만, 어쨌든 이 속성에 기입하면 해당 모듈에 종속이 되므로 그냥 디펜던시라고 부른다. 이 디펜던시를 패키지 관리자(npm, yarn, ...)로부터 설치하고 나면 node_modules 디렉토리에 포함된다. 각종 테스트 도구나 컴파일러 관련 도구들은 개발 및 테스트 환경에서만 사용될 것이므로 devDependencies 속성에 포함할 것이다. 또한 빌드시 devDependencies 속성의 디펜던시들은 포함되지 않으므로 더 빠르고 가볍게 빌드가 가능하다. package.json 파일에 디펜던시를 정의한 후 npm 으로 설치해도 되고, npm 명령어(--save)로 설치 후에 package.json 파일의 디펜던시 속성을 업데이트 할 수도 있다.

 

> npm install --save vue vue-router vuex (--save: default)
> npm install --save-dev webpack webpack-cli

 

 

2. scripts 속성

 

...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...

 

vue-cli-service serve 명령을 실행하면, 기본적으로 개발 서버 환경이 구동되며 브라우저(http://localhost:8080) 에서 프로젝트를 확인할 수 있다. 이 때 webpack-dev-server 기반의 HMR(Hot-Module-Replacement) 기능으로 소스 수정시 실시간으로 브라우저의 화면이 업데이트된다.

 

script 속성에는 패키지 관리자로부터 serve 명령을 실행하면 vue-cli-service serve 라는 구문을 실행하도록 되어 있는데 여기서 vue-cli-service 라는 파일은 ./node_modules/@vue/cli-service/bin/ 디렉토리에 있으며 ./node_modules/.bin 디렉토리에 심볼링 링크로 존재한다. 모든 디펜던시들이 이러한 형태를 가지고 있다. node_modules 디렉토리 안에 각자의 디렉토리들을 가지고 있으며 실행파일의 심볼릭 링크를 ./node_modules/.bin 디렉토리에 만들어서 경로를 단순하게 만들어 준다.

 

이 때 root 디렉토리에서 vue-cli-service serve 를 실행할 수 있는 방법은 다양하다.

 

> npm run serve (npm 사용)
> npx vue-cli-service serve (npx 사용)
> ./node_modules/.bin/vue-cli-service serve (심볼링 링크 사용)
> node ./node_modules/@vue/cli-service/bin/vue-cli-service serve (원본 파일 사용)
> vue-cli-service serve (./node_modules/.bin 디렉토리 path 추가 후 사용)


serve 명령 아래에 vue-cli-service build 명령을 실행하면, dist 디렉토리에 빌드된 결과물들이 생성되며, 이 결과물들을 실서버에 배포할 수 있다. vue-cli-service lint 명령은 소스 에러 체크시 사용한다.

 


WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret

Vue 프로젝트를 생성하는 방법으로, html 파일의 <script> 태그에 직접적으로 cdn import 를 시킬 수도 있겠지만 대부분은 IDE 나 vue-cli 를 사용하여 프로젝트의 전반을 구성할 것이다.

 

 

1. WebStorm

 

돈을 조금 내면(?) 빠르고 간단하게 Vue.js 프로젝트를 구성할 수 있다. WebStorm 은 JavaScript 통합 개발 환경으로, 대부분의 JS 프레임워크를 쉽게 시작할 수 있다. 메뉴에서 [New Project] - [Vue.js] 만 선택하면 vue 기본 프로젝트 생성이 끝난다. 이 때 필요한 것은 node.js 정도? 생성이 끝나면 기본 프로젝트(HelloWorld) 페이지를 빠르게 확인할 수 있다.

 

 

2. Visual Studio Code

 

VSC 가 꽤나 인기가 많은듯?(나만 몰랐다;) VSC 는 무료라는 가장 큰 장점도 있지만, 단지 텍스트 에디터에서 많은 확장 플러그인을 지원하여 IDE 에 가깝게 확장할 수 있는 것이 무료 매니아들의 마음을 사로잡은 것이 아닌가, 특히 JS 개발에 있어서... VSC 는 IDE 가 아니기 때문에 vue 프로젝트를 자동으로 만들어 주는 편리함은 없지만, 뭔가 수동으로 조작하는 맛이가 있는거 같음.

 

VSC 에서 vue.js 를 시작하기 위해서는 약간의 터미널 작업이 필요하다. (vue-cli 설치/vue 프로젝트 생성)

 

> npm install -g @vue/cli
# OR
> yarn global add @vue/cli

 

vue-cli 를 위와 같이 전역 설치하면 vue 명령어를 사용하여 프로젝트를 관리할 수 있다. vue create 를 사용하여 vue 프로젝트를 생성한다.

 

> vue create my-project

 

현재 디렉토리에 my-project 디렉토리가 생성되며, VSC 에서 생성한 my-project 디렉토리를 열면 자동 생성된 vue 프로젝트 구조(디렉토리 및 파일)를 확인할 수 있으며, WebStome 에서 만든 결과물과 거의 동일하다.

 

 

  • dist 디렉토리 : 빌드된 파일 생성 (실제 서버에는 이 디렉토리 내용만 올리면 됨)
  • node_modules : 설치된 모듈 패키지
  • public : webpack 으로 처리될 템플릿 (index.html)
  •  src  : 기본으로 assets, components 정도가 생성되어 있으며 router, views 등 실제 vue 개발에 관련된 작업물이 저장될 디렉토리
  • package.json : 자주 실행할 명령어(scripts), 확장 모듈(dependencies) 등 관리

 

package.json 파일의 serve 스크립트를 실행하면 브라우저(http://localhost:8080) 에서 생성된 vue 프로젝트를 확인할 수 있다.

 

 

추가적으로 VSC 에서 vue 개발에 필요한 확장 플러그인(ext:vue) 을 설치한다. vetur, html css support 등... 

 


WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret