Electron-vue之Renderer进程开发 vue-router、页面布局

文章首发于：clawhub.club

---

前端真的好难！！！！

今儿主要把路由配置测试了一下，页面简单的划分了一个布局。

vue-router

官方文档：https://router.vuejs.org/zh/
我就是简单的测试一下，因为页面又不多，又没有权限管理，即不需要动态路由，都是静态的。跳转路由测试也是简单的使用，没有参数的传递。

配置

import Vue from 'vue'
import Router from 'vue-router'
// Layout
import Layout from '@/views/layout/Layout'

Vue.use(Router)

export const constantRouterMap = [{
  path: '/login',
  component: require('@/views/login/index').default
},
{
  path: '/404',
  component: require('@/views/404').default
},
{
  path: '/',
  component: Layout,
  redirect: '/dashboard',
  name: 'Dashboard',
  children: [{
    path: 'dashboard',
    component: require('@/views/dashboard/index').default
  },
  {
    path: 'landing',
    component: require('@/components/LandingPage').default
  }]
},
{
  path: '*',
  redirect: '/404',
  hidden: true
}
]

export default new Router({
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
})

使用

<router-link to="/">Home</router-link>
<router-link to="/login">Login</router-link>
<router-link to="/404">404</router-link>
<router-link to="/landing">landing</router-link>

高深的用法等到用的时候再去查资料吧。

页面布局

我设计的布局是这样的：

做出来的布局是这样的！！！

深深的感觉到前端的艰难！！！
小白一个，目前的难点主要体现在：

• css使用不会
• css不是使用
• 不会使用css
  看的参考项目，有的用scss有的用stylus,CSS预处理器的知识完全为零，我得去学一下。