Начата работа над SPA-приложением с использованием vuex и element-ui

client/App.vue

@@ -1,28 +0,0 @@
-<template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App!!!"/>
-  </div>
-</template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'app',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

client/api/misc.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+async function test() {
+  try {
+    const response = await axios.post('/api/config', {params: ['version']});
+    console.log(response);
+  } catch (error) {
+    console.error(error.response.data);
+  }
+}
+test();
+

client/components/App.vue

@@ -0,0 +1,113 @@
+<template>
+    <el-container>
+        <el-aside :width="asideWidth">
+            <el-button class="el-button-collapse" @click="toggleCollapse" :icon="buttonCollapseIcon"></el-button>
+            <el-menu default-active="1" class="el-menu-vertical" @select="handleSelect" :collapse="isCollapse">
+              <el-menu-item index="1">
+                <i class="el-icon-search"></i>
+                <span slot="title">Картотека</span>
+              </el-menu-item>
+              <el-menu-item index="2">
+                <i class="el-icon-menu"></i>
+                <span slot="title">Источники</span>
+              </el-menu-item>
+              <el-menu-item index="3" disabled>
+                <i class="el-icon-message"></i>
+                <span slot="title">Форум</span>
+              </el-menu-item>
+              <el-menu-item index="4">
+                <i class="el-icon-setting"></i>
+                <span slot="title">Параметры</span>
+              </el-menu-item>
+              <el-menu-item index="5">
+                <i class="el-icon-question"></i>
+                <span slot="title">Справка</span>
+              </el-menu-item>
+            </el-menu>
+        </el-aside>
+
+        <el-main>
+            Main
+        </el-main>
+    </el-container>
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+export default @Component({
+    props: {
+        test: String
+    },
+})
+class App extends Vue {
+    isCollapse = false;
+    asideWidth = '170px';
+    buttonCollapseIcon = 'el-icon-d-arrow-left';
+
+    handleSelect(key, keyPath) {
+        console.log(key, keyPath);
+    }
+
+    toggleCollapse() {
+        this.isCollapse = !this.isCollapse;
+        if (this.isCollapse) {
+            this.asideWidth = '64px';
+            this.buttonCollapseIcon = 'el-icon-d-arrow-right';
+        }
+        else {
+            this.asideWidth = '170px';
+            this.buttonCollapseIcon = 'el-icon-d-arrow-left';
+        }
+    }
+}
+</script>
+
+<style scoped>
+.el-container {
+    height: 100%;
+}
+
+.el-aside {
+    line-height: 1;
+    background-color: #ddd;
+    color: #000;
+}
+  
+.el-main {
+    background-color: #E9EEF3;
+    color: #333;
+}
+
+.el-menu-vertical:not(.el-menu--collapse) {
+    background-color: inherit;
+    color: inherit;
+    text-align: left;
+    width: 100%;
+    border: 0;
+}
+
+.el-menu--collapse {
+    background-color: inherit;
+    color: inherit;
+    border: 0;
+}
+
+.el-button-collapse, .el-button-collapse:focus, .el-button-collapse:active, .el-button-collapse:hover {
+    background-color: inherit;
+    color: inherit;
+    margin-top: 5px;
+    width: 100%;
+    border: 0;
+ }
+
+</style>
+
+<style>
+body, html, #app {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+</style>

client/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

client/main.js

@@ -1,8 +1,12 @@
-import Vue from 'vue'
+import Vue from 'vue';
-import App from './App.vue'
+import App from './components/App.vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 
-Vue.config.productionTip = false
+//Vue.config.productionTip = false;
+
+Vue.use(ElementUI);
 
 new Vue({
-  render: h => h(App),
+    render: h => h(App),
-}).$mount('#app')
+}).$mount('#app');