一个大学生的个人建站

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

• 网站概括
  • 前端 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')
      }]
    }
  ]
})
复制代码

• 我感觉这里还可以，但我是个小白，有很多不规范或错误的地方，希望大神们能指出错误。

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

转载于:https://juejin.im/post/5c52f9516fb9a049b348683a