一个大学生的我的建站

这是我第一次作本身网站，不算是博客单但能够那么理解，主要是想拥有一个属于本身的我的网站但不知道作什么，只能跟博客有关了。作这个网站的目的主要是提高本身的能力和综合技能看看上线之后跟在本地有什么区别还有也能装一下，毕竟本身仍是学生并且仍是一名自学前端的大学生。

• 网站归纳
  • 前端 vue
  • 后端尚未写呢，由于用的tomcat，本人有学过java、jsp等，因此才有了tomcat。

1. 网站地址

Code Xiu's Web（还备有备案因此不能用域名呢）

2.网站目录结构

• 不规范或之后难维护的地方请大神们指出并批评，我必定虚心接受。

3. App.vue代码

<template>
  <div id="app">
    <Header></Header>
    <div class="navbar">
      <ul class="nav">
        <li class="item">
          <router-link :to="{name: 'Blog'}" class="nav-link" active-class="router-link-active">
            <span class="skew">技术博客</span>
          </router-link>
        </li>
        <li class="item">
          <router-link :to="{name: 'Cool'}" class="nav-link" active-class="router-link-active">
            <span class="skew">效果</span>
          </router-link>
        </li>
        <li class="item">
          <router-link :to="{name: 'notice'}" class="nav-link" active-class="router-link-active">
            <span class="skew">公告</span>
          </router-link>
        </li>
        <li class="item">
          <router-link :to="{name: 'About'}" class="nav-link" active-class="router-link-active">
            <span class="skew">关于</span>
          </router-link>
        </li>
      </ul>
    </div>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>
复制代码

• 我总感受这里好像不能写这些，但暂时尚未调整，但愿大神们能指出不对的地方，若是能给出建议更好。

4.router.js

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [{
      path: '/',
      redirect: '/index/techArticle'
    },
    {
      path: '/index',
      redirect: '/index/techArticle'
    },
    {
      path: '*',
      redirect: '/index/techArticle'
    },
    {
      path: '/index/techArticle',
      name: 'techArticle',
      component: () => import('./components/mainView/techArticle.vue'),
      redirect: '/index/techArticle/Blog',
      children: [{
        path: '/index/techArticle/Blog',
        name: 'Blog',
        component: () => import('./components/toolsComponents/Blog.vue')
      }]
    },
    {
      path: '/index/cool',
      name: 'Cool',
      component: () => import('./components/mainView/cool.vue'),
      redirect: '/index/cool/Round',
      children: [{
          path: '/index/cool/Round',
          name: 'Round',
          component: () => import('./components/toolsComponents/Round.vue')
        },
        {
          path: '/index/cool/Scale',
          name: 'Scale',
          component: () => import('./components/toolsComponents/Scale.vue')
        },
        {
          path: '/index/cool/Glass',
          name: 'Glass',
          component: () => import('./components/toolsComponents/Glass.vue')
        }, {
          path: '/index/cool/WebCarousel',
          name: 'WebCarousel',
          component: () => import('./components/toolsComponents/WebCarousel.vue')
        },
        {
          path: '/index/cool/TurnBook',
          name: 'TurnBook',
          component: () => import('./components/toolsComponents/TurnBook.vue')
        }, {
          path: '/index/cool/Panoramic',
          name: 'Panoramic',
          component: () => import('./components/toolsComponents/Panoramic.vue')
        }, {
          path: '/index/cool/Eyeshield',
          name: 'Eyeshield',
          component: () => import('./components/toolsComponents/Eyeshield.vue')
        }
      ]
    },
    {
      path: '/index/notice',
      name: 'notice',
      component: () => import('./components/mainView/notice.vue'),
      redirect: '/index/notice/Notice',
      children: [{
          path: '/index/notice/Notice',
          name: 'Notice',
          component: () => import('./components/toolsComponents/Notice.vue')
        },
        {
          path: '/index/notice/Exception',
          name: 'Exception',
          component: () => import('./components/toolsComponents/Exception.vue')
        }
      ]
    },
    {
      path: '/index/about',
      name: 'About',
      component: () => import('./components/mainView/about.vue'),
      redirect: '/index/about/Bloger',
      children: [{
        path: '/index/about/Bloger',
        name: 'Bloger',
        component: () => import('./components/toolsComponents/Bloger.vue')
      }]
    }
  ]
})
复制代码

• 我感受这里还能够，但我是个小白，有不少不规范或错误的地方，但愿大神们能指出错误。

总结： 但愿大神们能给出指导意见，能让一个小白更加规范的开发，避免之后走更多的弯路和错误。