Vue Cli (3.X 이상) 주요 설치 및 세팅 (sass, vuex, router)

Vue Cli 3.X 이상 일때 기준으로 Setting

1. SASS (scss)

• node-sass, sass-loader 설치

npm install --save-dev node-sass sass-loader

 

• vue.config.js 세팅 (모든 컴포넌트에 공통 스타일적용)
  • sass-loader 버전 8.X는 data가 아니고 prependData를 써줘야 한다.
  • 그 이상의 버전은 additionalData

// vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `
                    @import "@/assets/scss/_reset.scss";
                    @import "@/assets/scss/_variables.scss";
                    @import "@/assets/scss/_breakpoints.scss";
                    @import "@/assets/scss/_mixins.scss";
                `
            }
        }
    }
};

---

2. Polyfill 

Vue 3.X 이상의 경우 ES6사용으로 인해 IE브라우저를 지원하지 않는다 
IE 지원을 위해 polyfill등의 추가 세팅이 필요

• @babel/polyfill, @babel/preset-env 설치 

npm install --save @babel/polyfill
npm install --save-dev @babel/preset-env

 

• main.js (※ 최상단에 위치할 것)

//main.js

import '@babel/polyfill'
import Vue from 'vue'

 

• vue.config.js 세팅된 선언이 많을 경우 하단에 ' , ' 입력 후 이어서 붙여주기

//vue.config.js

const ansiRegex = require('ansi-regex');

module.exports = {
	transpileDependencies: [ansiRegex]
}

 

• babel.config.js

// babel.config.js

module.exports = {
	presets: [
		['@babel/preset-env']
	]
}

---

3. vuex

• 설치
  • 이전 버전으로 설치 했을 경우 npm uninstall --save vuex 로 이전버전 삭제 후 설치

 npm install --save vuex@next

 

• main.js

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index.js';

const app = createApp(App);

app.use(store);
app.mount('#app');

 

• store폴더, index.js 파일 생성

// store/index.js

import { createStore } from 'vuex';

export default createStore({
  state: {
  },
  getters: {
    
  },
  mutations: {
  
  }
});

---

4. Router

• 설치

npm i vue-router@next

 

• main.js

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js';

const app = createApp(App);

app.use(router);
app.mount('#app');

import { createWebHistory, createRouter } from 'vue-router';

const routes = [
  {
    path: "/",
  },
 
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;