vue 싱글 파일 컴포넌트 체계

Vue에 입문하기 좋은 장기효님의 Do it Vue.js 책  추천드립니다.

구매를 원하시는 분은 요기를 클릭해주세요

해당 글은 책 내용을 바탕으로 작성되었습니다.

 

 

HTML 파일에서 뷰 소스코드를 작성할때는 한계점이 있다. 

<script> 태그안에서 HTML 코드는 구분 강조가 적용안되서 오탈자 찾기도 힘듬

그래서 나온게 싱글 파일 컴포넌트 체계

 

싱글 파일 컴포넌트 체계는 .vue 파일로 프로젝트 구조를 구성하는 방식을 말함

확장자 .vue파일 1개는 애플리케이션을 구성하는 1개의 컴포넌트와 동일

 

1. .vue 파일의 기본구조

<template>
 <!-- HTML 태그 내용 & 뷰 데이터 바인딩 값 -->
</template>

<script>
//ES6의 모듈화 관련 문법
// 뷰컴포넌트의 내용을 정의 tempalte,data,methods등

export default {
 //자바스크립트 내용
}
</script>

<style>
  /*템플릿에 추가한 HTML 태그의 CSS 스타일을 정의 */
</style>

 

2. .vue 파일의 예시

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput v-on:addTodo="addTodo"></TodoInput>
    <TodoList v-bind:propsdata="todoItems" @removeTodo="removeTodo"></TodoList>
    <TodoFooter v-on:removeAll="clearAll"></TodoFooter>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  data() {
    return {
      todoItems: []
    }
  },
  methods: {
    clearAll() {
      localStorage.clear();
      this.todoItems = [];
    },
		addTodo(todoItem) {
			localStorage.setItem(todoItem, todoItem);
			this.todoItems.push(todoItem);
		},
    removeTodo(todoItem, index) {
      localStorage.removeItem(todoItem);
      this.todoItems.splice(index, 1);
    }
  },
  created() {
		if (localStorage.length > 0) {
			for (var i = 0; i < localStorage.length; i++) {
				this.todoItems.push(localStorage.key(i));
			}
		}
  },
  components: {
    'TodoHeader': TodoHeader,
    'TodoInput': TodoInput,
    'TodoList': TodoList,
    'TodoFooter': TodoFooter
  }
}
</script>

<style>
  body {
    text-align: center;
    background-color: #F6F6F8;
  }
  input {
    border-style: groove;
    width: 200px;
  }
  button {
    border-style: groove;
  }
  .shadow {
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.03)
  }
</style>





출처 : https://github.com/joshua1988/doit-vuejs

 

3. 뷰 CLI로 프로젝트 간단한 구성 예시

 

1) 뷰CLI 설치-> npm i vue-cli -g

2) 프로젝트 생성 -> vue init webpack-simple 

3) 관련 라이브러리 설치 -> npm install

4) 프로젝트 구동 -> npm run dev

 

4. 폴더구조

설치후 폴더구조 

 

webpack-simple

> node_modules  npm install 명령어로 다운받은 라이브러리가 존재하는 위치

> src

   ...

   index.html 뷰로 만든 웹 앱의 시작점 npm run dev 실행 시 로딩되는 파일

   package.json npm 설정 파일. 뷰 애플리케이션이 동작하는 데 필요한 라이브러리들을 정의하는 파일

   webpack.config.js 웹펙 설정 파일.웹펙 빌드를 위해 필요한 로직들을 정의하는 파일

 

 

5. package.json

 

vue init 명령어로 프로젝트 생성시 함께 생성됨

프로젝트 정보를 담고있는 설정파일임과 동시에 npm명령어 및 뷰로 애플리케이션을 제작하는데 필요한 라이브러리 정보 포함

 

{
  "name": "vue-todo",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "joshua1988 <jangkeehyo@gmail.com>",   // 프로젝트 정보
  "license": "MIT",
  "private": true,
  "scripts": {  //npm 실행명령어
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.4.4"
  },
  "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"
  }
}



출처 : https://github.com/joshua1988/doit-vuejs

 

 

 

6. 뷰로더(vue-loader)

 

뷰로더는 웹팩에서 지원하는 라이브러리임

뷰로더는 싱글 파일 컴포넌트 체계에서 사용하는 .vue파일의 내용을 브라우저에서 실행가능한 웹 페이지의 형태로 변환해준다.

App.vue 파일에서 <template>,<script>,<style>의 내용이 각각 HTML,자바스크립트, CSS 코드로 이식될 수 있도록 뷰로더가 변화작업을 수행

웹팩은 일반적으로 자바스크립트 모듈만 인식할수 있기 때문에 뷰 로더가 .vue파일을 일단 자바스크립트 모듈로 변환한다

 

(웹팩: 웹앱의 자원(HTML,CSS,이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상 시켜주는 자바스크립트 모듈 번들러임)

(모듈번들러:  서로 의존관계가 있는 모듈을 하나의 파일로 묶어주는 도구)

 

 

 

7.  webpack.config.js

웹팩 설정파일로 뷰로더가 들어간다

 

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
    })
  ])
}




출처 : https://github.com/joshua1988/doit-vuejs