Vue를 실행해보자

✍ vue 설치 및 실행

vue cli를 이용한 프로젝트 생성

vs code 터미널을 실행하여 입력해줍니다.

cd desktop //파일위치
$ vue init webpack-simple "폴더 이름" //설치

이렇게 입력하고 난 뒤에 배경화면에 해당 폴더가 새로 생성된 것을 확인할 수 있습니다.

npm 빌드하기

node modules을 설치하려면 다음과 같이 입력해줍니다.

$ npm install //설치
$ npm run dev //실행

router 설치

router는 지난번에 다뤘던 개념이므로 넘어가겠습니다.
자세한 부분은 아래 링크를 확인해주세요

vue router 정리

✍ 글로벌 import

global 컴포넌트

폴더 구조는 다음과 같습니다.
각자 index.js가 필요합니다.

├── src   
|    ├── components
|    |    ├── MyComponent.vue
|    |    └── index.js
|    ├── page
|    |    ├── MainPage.vue
|    |    └── index.js
|    ├── App.vue
|    └── main.js

📌 index.js

//export { default as 컴포넌트 이름 } from '루트'; 
//컴포넌트 폴더 안의 index.js
export { default as MyComponent } from './MyComponent'; 

📌 main.js

//components
import { MyComponent } from './components'
Vue.component('MyComponent', MyComponent)

이렇게 등록 해놓으면 일일이 import 과정 없이
template내에 태그만 적어 사용할 수 있습니다.

global scss

일단 global로 사용할 scss 파일을 만들어야 한다.
다음과 같은 폴더 구조를 지향한다.

├── src   
|    └── assets
|           └── css
|                └── main.scss //global
└── webpack.config.js

$ npm install sass-resources-loader

위와 같이 설치해준 다음
scss rules에 loader를 import 해주고 vue에도 추가해준다.
(vue style안에 해당 scss변수를 사용하는 경우)

📌 Webpack@2: webpack.config.js

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            // Provide path to the file with resources
            // 경로 입력
            resources: './path/to/resources.scss',

            // Or array of paths
            resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          },
        },
      ],
    },

    ...
    {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader',
              {
                 loader: 'sass-resources-loader',
                 options: {
                     // Provide path to the file with resources
                     // 경로 입력
                     resources: './path/to/resources.scss',

                    // Or array of paths
                    resources: ['./path/to/vars.scss', './path/to/mixins.scss']
                 },
              },
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
     },
  ],
},

그냥 실행하면 에러가 나니
서버를 다시 실행시켜 확인해보도록 하자

$ npm run dev

global js

다음과 같은 폴더 구조를 만든다.

├── src   
|    ├── assets
|    |    └── js
|    |        └── common.js //global
|    └── main.js

📌 common.js

//함수 예제 
//숫자 1000단위 콤마 정규표현식
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

//함수 정의
export default {
    install(Vue) {
      	//이렇게 정의한다.
        Vue.prototype.$numberWithCommas = numberWithCommas;
    }
}

📌 main.js

//common.js (공통.js)
import common from './assets/js/common'
Vue.use(common)

📌 MainPage.vue

<template>
	<p>{{$numberWithCommas(1000)}}</p>
</template>