[#615] 3.0 환경 구축

################ 1) vue.js 3.0으로 환경 구축 2) eslint 수정 및 범위 변경(docs폴더 포함) - 기존 eslint에 vue3-strongly-recommended, airbnb-base 플러그인 추가 - 2.0의 eslint rule 내용 계승 3) EVUI 사이트 페이지 및 라우터 추가
ex-em · Sep 9, 2020 · c7f2dd9 · c7f2dd9
1 parent 0355614
commit c7f2dd9
Show file tree

Hide file tree

Showing 41 changed files with 2,981 additions and 107 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/babel.config.js b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+    '@vue/cli-plugin-babel/preset',
+  ],
+};
diff --git a/docs/App.vue b/docs/App.vue
@@ -1,8 +1,29 @@
 <template>
-  <div id="app">
-    <router-view />
-  </div>
+  <MainHeader />
+  <MainContent />
 </template>
 
+<script>
+import MainHeader from './components/Header';
+import MainContent from './components/Content';
+
+export default {
+  name: 'Home',
+  components: {
+    MainHeader,
+    MainContent,
+  },
+};
+</script>
+
 <style lang="scss">
+@import '~@/stylesheets/default';
+
+* {
+  font-family: 'NanumGothic', Arial, 'Helvetica Neue', Helvetica, sans-serif;
+}
+
+#app {
+  padding-top: 55px;
+}
 </style>
diff --git a/docs/components/Content.vue b/docs/components/Content.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="evui-main-content">
+    <MenuNav />
+    <div class="evui-main-content-body">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuNav from '../components/Menu';
+
+export default {
+  components: {
+    MenuNav,
+  },
+  setup() {},
+};
+</script>
+
+<style scoped>
+.evui-main-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0 240px;
+}
+
+.evui-main-content-body {
+  padding: 20px;
+}
+</style>
diff --git a/docs/components/Example.vue b/docs/components/Example.vue
@@ -0,0 +1,35 @@
+<template>
+  <section>
+    <h2>{{ title }}</h2>
+    <p class="example-desc">
+      {{ description }}
+    </p>
+    <div>
+      123
+    </div>
+    <hr class="example-splitter">
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'Example',
+  components: {
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="evui-main-header">
+    <div class="evui-header-title">
+      <a href="/">
+        <img
+          alt="EVUI LOGO"
+          src="http://evui.ex-em.com/wp-content/uploads/2017/11/evui_1.png"
+        >
+        <div>EXEM Visualization UI</div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+a, span {
+  text-decoration: none !important;
+}
+a:visited {
+  color: #000000;
+}
+.evui-main-header {
+  display: table;
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 55px;
+  background: #67A1F4;
+  z-index: 1000;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+.evui-header-title {
+  display: table-cell;
+  vertical-align: middle;
+}
+.evui-header-title > a {
+  display: table;
+}
+.evui-header-title > a > img {
+  display: table-cell;
+}
+.evui-header-title > a > div {
+  display: table-cell;
+  color: rgb(43,87,151);
+  padding-left: 10px;
+  vertical-align: middle;
+  font-size: 15px;
+  font-weight: bold;
+}
+</style>
diff --git a/docs/components/Menu.vue b/docs/components/Menu.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="evui-left-navigation">
+    <ul>
+      <li
+        v-for="(menu, index) in store"
+        :key="menu.name + index"
+        @click="clickMenu(menu.routerLink)"
+      >
+       {{ menu.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import router from '../router';
+
+export default {
+  setup() {
+    const store = [
+      {
+        name: 'Introduce',
+        cls: 'fas fa-th-large',
+        routerLink: '/',
+      },
+      {
+        name: 'Tab',
+        routerLink: '/tab',
+        content: '탭 패널 샘플',
+      },
+      {
+        name: 'ContextMenu',
+        routerLink: '/contextMenu',
+        content: '컨텍스트 메뉴',
+      },
+      {
+        name: 'Button',
+        routerLink: '/button',
+        content: '버튼',
+      },
+      {
+        name: 'CheckBox',
+        routerLink: '/checkBox',
+        content: '체크박스',
+      },
+      {
+        name: 'RadioButton',
+        routerLink: '/radioButton',
+        content: '라디오버튼',
+      },
+      {
+        name: 'InputNumber',
+        routerLink: '/inputNumber',
+        content: '숫자입력',
+      },
+      {
+        name: 'SelectBox',
+        routerLink: '/selectBox',
+        content: '셀렉트 박스',
+      },
+      {
+        name: 'Slider',
+        routerLink: '/slider',
+        content: '슬라이더',
+      },
+      {
+        name: 'Grid',
+        routerLink: '/grid',
+        content: '테이블 - 그리드',
+      },
+      {
+        name: 'Tree',
+        routerLink: '/tree',
+        content: '트리',
+      },
+      {
+        name: 'Tree Table',
+        routerLink: '/treeTable',
+        content: '트리 테이블',
+      },
+      {
+        name: 'Date Picker',
+        routerLink: '/datePicker',
+        content: '데이트 피커',
+      },
+      {
+        name: 'Toggle',
+        routerLink: '/toggle',
+        content: '토글',
+      },
+      {
+        name: 'TextField',
+        routerLink: '/textField',
+        content: '텍스트 필드',
+      },
+      {
+        name: 'Bar Chart',
+        routerLink: '/barchart',
+        content: '바 차트',
+      },
+      {
+        name: 'Line Chart',
+        routerLink: '/lineChart',
+        content: '라인 차트',
+      },
+      {
+        name: 'Scatter Chart',
+        routerLink: '/scatterChart',
+        content: '점 차트',
+      },
+      {
+        name: 'Pie Chart',
+        routerLink: '/pieChart',
+        content: '파이 차트',
+      },
+      {
+        name: 'Combo Chart',
+        routerLink: '/comboChart',
+        content: '복합 차트',
+      },
+      {
+        name: 'Reactivity Chart',
+        routerLink: '/reactivityChart',
+        content: '실시간 차트',
+      },
+    ];
+
+    const clickMenu = (routerLink) => {
+      router.push({ path: routerLink });
+    };
+
+    return {
+      store,
+      clickMenu,
+    };
+  },
+};
+</script>
+
+<style>
+.evui-left-navigation {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>
diff --git a/docs/main.js b/docs/main.js
@@ -1,11 +1,16 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import EVUI from '../src'
-
-createApp(App)
-  .use(store)
+import { createApp } from 'vue';
+import EVUI from '@/main';
+import Example from './components/Example.vue';
+
+import App from './App.vue';
+import router from './router';
+import store from './store';
+
+const app = createApp(App);
+
+app.component('Example', Example);
+
+app.use(store)
   .use(router)
   .use(EVUI)
   .mount('#app');