feat: auto router and menu

Author: FairyEver

.env

@@ -0,0 +1 @@
+VUE_APP_XXX=XXX

.github/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Deploy
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  
+  gh-pages:
+    name: Github Pages
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - uses: bahmutov/npm-install@v1
+    - name: Set vue cli env
+      shell: bash
+      run: |
+        echo -e "\
+        VUE_APP_PUBLIC_PATH=/${GITHUB_REPOSITORY//*\//}/\
+        " > .env.production.local
+        cat .env.production.local | while read line
+        do
+          echo $line
+        done
+    - name: Build
+      run: yarn build --report
+    - name: Deploy
+      uses: peaceiris/actions-gh-pages@v2
+      env:
+        PERSONAL_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+        PUBLISH_BRANCH: gh-pages
+        PUBLISH_DIR: ./dist
+      with:
+        forceOrphan: true

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release pipeline
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  publish:
+    if: "! contains(github.event.head_commit.message, '[skip ci]')"
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - name: Semantic Release
+      uses: cycjimmy/semantic-release-action@v2
+      with:
+        extra_plugins: |
+          @semantic-release/changelog@3.0.6
+          @semantic-release/git@7.0.18
+      env:
+        GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+
+  # !TRICKY
+  # https://github.community/t5/GitHub-Actions/Workflow-is-failing-if-no-job-can-be-ran-due-to-condition/td-p/38085
+  always_job:
+    name: Always run job
+    runs-on: ubuntu-latest
+    steps:
+      - name: Always run
+        run: echo "TRICKY run"

package.json

@@ -3,15 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint --fix",
-    "git-add-all": "git add .",
-    "git-cz": "git cz",
-    "git-push-master": "git push origin master"
+    "lint": "vue-cli-service lint --fix"
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "element-ui": "^2.13.1",
+    "flex.css": "^1.1.7",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"

src/App.vue

@@ -1,32 +1,11 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
-  </div>
+  <router-view/>
 </template>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 </style>

src/assets/logo.png

@@ -0,0 +1,15 @@
+<style lang="scss">
+.demo {}
+</style>
+
+<template>
+  <div class="demo">
+    demo
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'demo'
+}
+</script>

src/assets/style/public.scss

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+
+const vueFiles = require.context('./', true, /com\.vue$/)
+vueFiles.keys().forEach(key => {
+  const component = vueFiles(key).default
+  Vue.component(component.name, component)
+})
+
+const jsFiles = require.context('./', true, /com\.js$/)
+jsFiles.keys().forEach(key => {
+  const component = jsFiles(key).default
+  Vue.component(component.name, component)
+})

src/components/HelloWorld.vue

@@ -0,0 +1,53 @@
+<style lang="scss">
+.layout-main {
+  height: 100%;
+  .layout-main--side {
+    width: 200px;
+    background-color: #051428;
+    .el-menu {
+      border-right: none;
+      .el-menu-item {
+        &.is-active {
+          background-color: #458DF8 !important;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<template>
+  <div class="layout-main" flex="dir:left">
+    <div class="layout-main--side" flex-box="0">
+      <el-menu
+        :default-active="$route.path"
+        background-color="#051428"
+        text-color="#969CA5"
+        active-text-color="#FFF"
+        router>
+        <el-menu-item
+          v-for="menu of menus"
+          :key="menu.path"
+          :index="menu.path">
+          {{ menu.title }}
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div flex-box="1">
+      <router-view/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { menus } from '@/router'
+
+export default {
+  name: 'layout-main',
+  data () {
+    return {
+      menus
+    }
+  }
+}
+</script>

src/components/demo/com.vue

@@ -1,10 +1,19 @@
 import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import App from '@/App.vue'
+import { router } from '@/router'
+import store from '@/store'
+
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+import 'flex.css'
+
+import '@/components'
 
 Vue.config.productionTip = false
 
+Vue.use(ElementUI)
+
 new Vue({
   router,
   store,

src/components/index.js

@@ -1,27 +1,45 @@
+import path from 'path'
+
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+
+import layoutMain from '@/layout/main'
+
+const views = []
+
+const vueFiles = require.context('@/views', true, /page\.vue$/)
+vueFiles.keys().forEach(key => {
+  const component = vueFiles(key).default
+  const routePath = path.dirname(component.__file).replace(/^src\/views\//, '')
+  const routeName = routePath.replace(path.sep, '-')
+  views.push({
+    name: routeName,
+    path: routePath,
+    component
+  })
+})
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: layoutMain,
+    children: [
+      {
+        path: '',
+        component: () => import('@/views')
+      },
+      ...views
+    ]
   }
 ]
 
-const router = new VueRouter({
+export const menus = views.map(view => ({
+  path: '/' + view.path,
+  title: view.component.title
+}))
+
+export const router = new VueRouter({
   routes
 })
-
-export default router

src/layout/main/index.vue

@@ -1,15 +1,15 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+const files = require.context('./modules', false, /\.js$/)
+const modules = {}
+
+files.keys().forEach(key => {
+  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default({})
+})
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
+  modules
 })