vue 정리

• 'vue.js 첫걸음' 및 강의 참고
• 헷갈리는 개념만 readme 에 정리
• 코드는 따로작성!

vue-cli 3 기반의 기본기 정리

• 여기로
• vue-router 사용법 링크

vue-cli 2 기반

CDN

• 웹페이지에 vue 라이브러리 포함시킬 경우 이용

https://unpkg.com/vue@<version>/dist/vue.js
https://unpkg.com/vue@<version/dist/vue.min.js

https://cdn.jsdelivr.net/npm/vue@<version>/dist/vue.js
https://cdn.jsdelivr.net/npm/vue@<version>/dist/vue.min.js

https://cdnjs.cloudflare.com/ajax/libs/vue/<version>/vue.js
https://cdnjs.cloudflare.com/ajax/libs/vue/<version>/vue.min.js

vue-cli

• node는 알아서 설치
• npm install -g vue-cli (참고, vue-cli 3는 다르게 깔음)
• vue init webpack hello

빌드(모듈화)방식/형식과, 빌드도구(모듈번들러) -> 일단 쓸줄 몰라도. 뭔지는 알고 있어야

• 참고로 vue-cli는 기본 '빌드' 템플릿으로 webpack, browserify 등을 제공

  • 왜 빌드란 것이 필요 한 것인지????? 궁금스해서 정리함

• 빌드 도구가 필요한 이유는, 자바스크립트가 기본적으로 '모듈화 기능'을 지원하지 않기 때문

  • 모듈화가 되어서 하나로 잘 묶인다면 브라우저에서 쓰기 편하니까 그런가?
    • ㅇㅇ, webpack 이나 browserify와 같은 모듈번들러를 이용하면
      프로그램을 single file로 만들 수 있어 쉽게 배포 가능!

• UMD (Universal Module Definition) 빌드 방식

  • 'UMD 기반으로 작성한 모듈 파일'이 있으면 브라우저에서 vue.js 파일을 쉽게 사용할 수 있다!?
  • ★ Vue 라이브러리는 내부적으로
    • (템플릿을 컴파일하는 부분 + 컴파일된 코드 및 vue 코드를 실행하는 런타임 부분)으로 나눔
  • UMD 기반으로 번들링된 vue.js 라이브러리 파일의 경우에
    • (컴파일러 + 런타임 부분을 합한) 버전인 vue.js or vue.min.js
    • (런타임 부분만을 포함한) vue.runtime.js or vue.runtime.min.js 라이브러리 파일들을 제공한다.
  • 따라서 템플릿이 미리 컴파일 되어 있다면, 런타임 라이브러리만 포함시켜 번들링할 수 있다.
    -> 이 경우 컴파일러가 없으므로 용량이 30%정도 줄어든다고함...(컴파일러까지 포함된 빌드 파일에 비해)
  • 그렇기 때문에, 만약 웹페이지에 vue template을 구현한다면,
    웹페이지에 CDN을 추가할 때, 반드시 컴파일러가 포함된 라이브러리를 사용해야함.
    • 먼 느낌인지만 알겠다.

• UMD, CommonJS, Browserify, Webpack 등 듣도 보지도 못한 용어들이 계속 나오는데!!!!!

  • UMD, CommonJS는 모듈 형식; 모듈 방식, 빌드 형식을 말하는 것 같고
  • Browserify, Webpack은 모듈 형식에 기반한 모듈 번들러; 빌드도구를 의미하는 것 같다...
    (책에 뭔가 두서없이 정리되어있어 답답스ㅡㅡ;)

• 번들러 역할은, 걍 프로젝트를 번들화 해서 하나로 묶어주는 역할인 듯 ( + 코드 난독화 및 압축의 효과 )

• CommonJS에 대해서 간략히 살펴보면 (이또한 UMD 같은 빌드 타입인듯 싶다)

  • ES6가 나오기 이전에 자바스크립트 모듈화를 위해 사용하던 것
  • Node.js 에서 채택한 방식이라고함
  • vue.js 는 commonjs 기반의 빌드를 위한 파일또한 제공한다
    • (vue.common.js, vue.runtime.common.js)
    • commonjs 모듈 형식의 파일은 browserify, webpack 1등의 모듈 번들러와 사용 가능하다!!
      • 이 CommonJS 기반의 번들러인 Browserify 에 대해서 간단히 살펴보면

        bundle
        - node_module
          - sum.js
          - vue.common.js (vue 라이브러리)
        - main.js
        - index.html
        

        sum.js

        function sum(i, j) {
          return i + j
        }
        module.exports = sum;

        main.js

        var sum = require("sum");
        var Vue = require("vue.common"); // commonjs 기반으로 제공되는 vue.js 파일
        
        var app = new Vue({
          el: "#app",
          data: {
            message: sum(1,3)
          }
        });

        index.html

        <div id="app">
            {{ message }}
        </div>
        <script src="bundle.js"></script>

        뭐, 이런식으로 구조를 만들고 나서 browserify를 이용한 번들링을 하면!!
        브라우저에 구현이 안된 CommonJS 기반으로 모듈을 불러오는 작업을 위해서
        js파일을 하나로 묶어버릴 수 있다.
        (여기서 commonjs 기반의 모듈이 왜나오냐면, browserify에서 지원하는 '모듈 형식' 중 하나기 때문) bundle.js 라는 아웃풋으로.

        browserify main.js -o bundle.js
        

        파일 하나로 번들링 해버림 (bundle.js만 포함하면 vue.js 는따로 요청 안해도됨, 이미 합해져있어서)
        • 추가적으로, Browserify는 파일만 합쳐줄 뿐,
          난독화/압축 작업 안하기 때문에 필요하면 uglify라는 것을 이용.
        • 주의할 점 하나, Browserify는 모듈 파일이 node_modules에 모두 존재해야 하므로, 주의
      • Webpack 1
        • 바로 앞 예제를 webpack 1 번들러를 통해서 번들링할 수도 있음
        • npm install -g webpack@1
        • webpack main.js bundle.js 하면 끝
        • 여러 추가 기능이 있음

• ES Module

  • UMD, CommonJS같은 모듈 방식(빌드 방식)
  • 2015년 발표한 ES6 이후 서버사이드(nodejs) 및 클라이언트(웹페이지) 개발 모두에서 사용할 수 있는 '모듈화 형식'
  • vue.js 는 ES6 이상의 모듈(ES Module)을 빌드하기 위해 vue.esm.js, vue.runtime.esm.js 를 제공함
    • ES 라이브러리? (ES6 스크립트에서 사용할 수 있도록 빌드된 vue.js 라이브러리 파일)
  • ES Module 빌드 프로젝트 구조

    bundle
    - node_modules
      - sum.js
      - vue.js
    - webpack.config.js
    - main.js
    - index.html
    

    ES Module 빌드를 위해 vue.js 설치

    npm install vue

    sum.js

    export default function (i, j) {
      return i + j;
    }
    

    main.js

    import Vue from "vue"
    import sum from "sum"
    
    const app = new Vue({
     el: "#app",
     data: {
      message: sum(1, 5)
     }
    });

    이후에, webpack 3 모듈 번들러 필요

    npm install -g webpack@3
    

    webpack.config.js (앱을 빌드 할 때, 어떤 스크립트를 번들 파일로 만들고, 위치 시키고, 최적화 시킬지)

    const webpack = require('webpack');
    var path = require('path');
    
    module.exports = {
      entry: {
        app: './main.js'  // app이라는 key는 [name]으로 재사용 가능, value는 번들링 대상
      },
      output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js',  // 번들링 이후에 /dist/app.js 가 생성될 것임
        publicPath: '/'
      },
      plugins: [
        new webpack.EnvironmentPlugin(['NODE_ENV'])
      ],
      resolve: { // ES Module을 불러 사용하기 위해 옵션 추가.
        alias: {
          'vue$': 'vue/dist/vue.esm.js' // js 파일에서 어떤 이름으로 ES Module을 참조할지 지정
        },
        extensions: ['.js'] // webpack 실행시, 명시된 확장자와 일치하는 파일 내에선(?) alias 옵션 참조 가능
      },
    }

    index.html

    <div id="app">
      {{ message }}
    </div>
    <script src="dist/app.js"></script>

    마지막으로

    webpack
    

    명령어를 실행함으로써 app.js를 생성한다.

• 이 외에도, Rollup 모듈 번들러도 있다고함. (webpack3같은 ESM 전용 번들러)

  • 궁금스 하면 책참고

static 폴더 만들기

• vue.config.js

module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

• 그런데 에러 발생: ERROR Invalid options in vue.config.js: "build" is not allowed
• 걍 public