vue.js 개발환경 main.js, vue.config.js, vuetify.js, package.json, babel.config.js 샘플 스크립트

vue.js 개발환경 예제 스크립트

[vue.config.js]

module.exports = {
  publicPath: '/front',
  outputDir: '../main/webapp/front/',
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'src/service-worker.js',
    },
  },
  devServer: {
    proxy: {
      '/business': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/business': '',
        },
      },
    },
  },
  transpileDependencies: [
    'vuetify',
  ],
  configureWebpack: {
    devServer: {
      headers: { 'Access-Control-Allow-Origin': '*' },
    },
  },
};

[package.json]

{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@websanova/vue-auth": "^2.21.16-beta",
    "axios": "^0.19.2",
    "core-js": "^3.4.4",
    "highcharts": "^8.1.0",
    "highcharts-3d": "^0.1.7",
    "highcharts-vue": "^1.3.5",
    "js2excel": "^1.0.1",
    "konva": "^6.0.0",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "register-service-worker": "^1.6.2",
    "sha256": "^0.2.0",
    "url-search-params-polyfill": "^8.0.0",
    "vue": "^2.6.10",
    "vue-auth": "^1.0.0-alpha.1",
    "vue-axios": "^2.1.5",
    "vue-cookie": "^1.1.4",
    "vue-konva": "^2.1.3",
    "vue-meta": "^2.3.2",
    "vue-router": "^3.1.3",
    "vue-session": "^1.0.0",
    "vuedraggable": "^2.23.2",
    "vuetify": "^2.2.27",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.8.4",
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-pwa": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-airbnb": "^4.0.1",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.3",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-vuetify": "^2.0.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/airbnb"
    ],
    "rules": {
      "no-console": "off",
      "no-alert": "off",
      "template-curly-spacing": "off",
      "indent": "off",
      "object-curly-newline": "off",
      "vue/no-use-v-if-with-v-for": "off",
      "linebreak-style": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

[babel.config.js]

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
};

[main.js]

import Vue from 'vue';
import { Common } from '@/assets/lib/mixin/common';
import { Filter } from '@/assets/lib/mixin/filter';
import { CommAxios } from '@/assets/lib/mixin/axios';
import { dialog } from '@/assets/lib/mixin/dialog';
import router from '@/router';
import store from './store';
import App from './App.vue';
 
import vuetify from './assets/plugins/vuetify';
 
// eslint-disable-next-line
Vue.config.warnHandler = function () {}; // 디버깅 모드에서 Vue-warn 오류로그 비활성화
Vue.config.productionTip = false;

let app;
if (!app) {
  Vue.mixin(Common);
  Vue.mixin(Filter);
  Vue.mixin(CommAxios);
  Vue.mixin(dialog);

  /* eslint-disable no-new */
  app = new Vue({
    vuetify,
    router,
    store,
    render: h => h(App),
  }).$mount('#app');
}

[vuetify.js]

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#00ACC1',
      },
    },
  },
});