Vue拿来直接用的静态登录注册页面、后台主页代码

一、登录/注册页面

1、静态展示

 2、登录/注册静态源码

前提是已经在main.js中配置好Element-ui的全局使用：

npm install element-ui -S

// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

二、后台主页

 1、静态展示

 

 

 2、后台管理页面静态源码

1）路由router的配置index.js

// 创建应用程序的路由器
import Vue from 'vue'
import VueRouter from 'vue-router'
// 此时就可以在Vue实例中配置路由器了
Vue.use(VueRouter)

// 引入组件
import Index from '../views/index'
import Login from '../views/login'

// 创建并暴露一个路由器
export default new VueRouter({
  routes:[
    {
      path: '/',
      component: Index,
      redirect: '/cpgl',
      // 子路由
      children: [
        {
          path: '/cpgl',
          name: 'cpgl',
          component: () => import(('@/components/cpgl'))
        },
        // {
        //   path: '/ddgl',
        //   name: 'ddgl',
        //   component: () => import(('@/components/ddgl'))
        // }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

2）index.vue组件

3）内容主体cpgl.vue组件