[vue.js] 뷰 CLI

싱글 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 파일로 변환해주는 도구가 필요.

ex. 웹팩(웹앱의 자원을 자바스크립트모듈로 변환), 브라우저파이(웹팩과 비슷한 모듈 번들러)

 

뷰 프로젝트를 쉽게 구성할 수 있게 뷰 CLI 도구를 제공.

CLI에서 제공하는 명령어를 이용하면 뷰 애플리케이션을 개발하기 위한 초기 프로젝트 구조를 쉽게 구성 가능.

웹팩이나 브라우저파이 같은 모듈 번들러를 프로젝트 자체에 포함하여 바로 사용 가능.

.vue 파일을 HTML, css, javascript 파일로 변환해 주기 위한 뷰 로더를 포함.

뷰 CLI 설치

npm install vue-cli -global # vue-cli 설치
vue # vue-cli 설치 여부 확인

설치 및 명령어 확인

 

 

 

webpack-simple 템플릿은 뷰로 개발하기 위한 웹팩의 최소 기능들만 있어 프로젝트 구성이 간단.

vue init webpack-simple

실행해보면, 프로젝트에 필요한 내용(제목, 저자, 요약)과 필요한 구성요소들을 물어봄.

시작하기 위해 노드 모듈을 설치 후에, npm run dev를 이용해, 실행

npm install

npm run dev

npm install

 

npm run dev

 

구동되고 난 다음 디렉토리를 보게되면, 다음과 같은 폴더 구조가 생성된 것을 확인할 수 있음.

wepback-simple의 폴더 기본 구조

 

package.json을 보면 아래와 같이 프로젝트 정보, npm 실행 명령어(scripts), 뷰 및 웹팩과 관련되 라이브러리가 정의됨.

package.json 내용

wepback-simple 실행시 메인화면

 

뷰 로더(Vue Loader)

웹팩에서 지원하는 라이브러리.

.vue 파일의 내용을 브라우저에서 실행 가능한 웹  페이지의 형태로 변환해줌.

예를들어, App.vue의 <template>, <scripts>, <style>의 내용이 각각 웹 요소로 인식될 수 있도록 변환작업을 진행함.

 

뷰 로더 속성 확인

webpack.config.js를 보면 vue-loader가 적용되어 있음.

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,    // 대상 파일 지정
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader', // 사용할 로더 지정
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

 

정리

정리하자면, 뷰 CLI는 다음과 같은 과정을 통해 쉽게 프로젝트 껍데기를 만들 수 있게 도와준다.