7. 프로젝트 구조의 파악

개요

• 뷰를 통해 대규모, 소규모 App 을 만들때 html 파일에 Vue 코드를 다 끼워 넣는 일은 Vue 가 가지는 컴포넌트 기반의 특성을 무시하는 일과도 같다.
• 재사용성, 가독성, 직관성 을 얻게해주는 MVVM 모델의 장점이 무너지는 것으로 보인다.
• 그러므로 Single File Component 를 이용하여 .vue 파일로 컴포넌트를 나누고 ES6 와 연계하여 코드의 가독 성과 직관성, 재사용성을 꾀한다.
• 이를 위한 Project 구조, 파일, 기능 등을 만들어주는 것이 Vue CLI 이다.

---

Vue CLI

• Single File Component 체계를 위해서 .vue 파일을 웹 브라우저가 이해할 수 있는 형태의 파일로 변환해주어야한다.
• 이런 기능을 제공해주는 녀석들은 Module Bundler 라고 하는데, 대표적으로 Webpack, Browserify 가 있다.
• Webpack 은 HTML, CSS, 이미지 등의 웹 자원 을 Javascript Module 로 변환해 하나로 묶는다.
• 이를 간단하게 설치할 수 있게 해주는 것이 Vue CLI 이다.

npm i -g vue-cli

 

제공되는 Command

• vue init webpack : 고급 웹팩 기능, Test, 문법 검사 등 지원
• vue init webpack-simple : 웹팩의 최소한의 기능, 빠른 프로토 타이핑 용이다.
• vue init browserify : 동일, 브라우저리파이 사용
• vue init browserify-simple : 동일, 브라우저리파이 사용
  
• vue init pwa : 웹팩을 기반으로하는 Progressive Web App 기능 지원

공통 기능

• Webpack , Browserify 등의 Module Bundler 를 프로젝트에 포함하여 사용한다.
• .vue 파일을 HTML, CSS, JS 등의 웹 자원 으로 변환시켜주는 Vue Loader 를 포함시킨다.
• 즉, Module Bundler, Vue Loader 없이는 SingleFileComponent 방식을 이용할 수 없다.

---

프로젝트구조

 

vue init webpack-simple 명령어로 만든 프로젝트 구조는 다음과 같다.

---

npm 라이브러리 정의파일 => package.json

• 해당 파일 설정에 따라 npm i 을 하게되면 node_modules 폴더에 의존들이 들어오게 된다.
• Vue Core , 웹팩을 빌드시키는 Babel , css*file*vue 파일을 컴파일 하는 Loader, 웹팩 dev-server 등이 들어온다.
• npm run dev 등의 명령어로 dev-server 를 호출하면 index.html 파일이 로딩된다.

{
//  프로젝트 정보
  "name": "proj",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "SooMinJung0413 <doli061214@gmail.com>",
  "license": "MIT",
  "private": true,
  
//  npm 실행 명령어
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  
//  뷰, 웹팩 라이브러리
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

 

---

Vue Loader 

• .vue 파일을 컴파일시켜 웹 자원으로 변환하는 Vue Loader 는 Webpack 에서 제공한다.
• Webpack 은 JS Module 만 인식가능하다. 그렇기 때문에 .vue 파일은 Vue Loader 가 .vue 파일을 JS 파일로 컴파일한다.
• .vue -> Vue Loader -> .js -> Webpack
• Vue Loader 를 확인하려면 webpack.config.js 파일을 확인한다.

webpack.config.js

1. test :  로더 적용 대상
2. loader : 적용할 로더의 종류

  module: {
    rules: [
      {
      //css 파일을 컴파일 시키는 css-loader
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      }, 
      // vue 파일을 컴파일 시키는 vue-loader
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      //webpack 을 빌드시키는 Babel
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },