快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)

设置完中文界面,打开是这样的

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第1张图片

端口号更改

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第2张图片

嘿嘿,要把项目改成自己的,是不是要更改标题啊

题目更改

src/utils/get-page-title.js

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第3张图片

src/settings.js

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第4张图片

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第5张图片

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第6张图片

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第7张图片

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第8张图片

如何添加菜单页面

添加菜单页面(父菜单/子菜单)

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第9张图片

效果图

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第10张图片

添加自己的页面

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第11张图片

效果图

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第12张图片

{
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: '智慧校园管理系统',affix: true }
      }
    ]
  },

快速入门:教你如何使用vue-element-admin 集成框架开发项目(保姆式教学)_第13张图片

你可能感兴趣的:(vue.js,前端,javascript)