devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

管理系统的前端模板（vue2+Element UI）_vue项目前端页面模板

作者：不正经 | 2024-04-21 01:19:29

赞

踩

vue项目前端页面模板

目录

前言

一、模板展示图

二、获取的方式及操作运行步骤 

（一）获取方式

（二）操作步骤 

1.下载安装node.js 

2.下载完成解压缩后在idea的里面打开终端。

3.输入下载相关依赖的命令

4.运行项目的命令

5.然后把给到的地址浏览器打开就可以了

 三、代码的展示(这个点的内容仅供阅览，实际意义不大)

 HomeView.vue

App.vue 

main.js 

 src的assets文件下新建的gloable.css 

前言

这是引用ElementUI官网的布局容器里面的代码拿来修改优化后的。用的框架是vue2。

只是前端模板，没有涉及到后端的代码

一、模板展示图

导航栏、增删改查、导入导出、个人信息退出等

 导航栏收缩功能

分页功能 

代码目录阅览

二、获取的方式及操作运行步骤 

（一）获取方式

去公众号“云边的快乐猫”，回复：v2

（二）操作步骤 

1.下载安装node.js 

ps：如果有安装过的就不用安装了，查看的方式为，有版本号就说明之前安装过了

node -v

 nacos的介绍和下载安装（详细）_nacos下载安装_云边的快乐猫的博客-CSDN博客

2.下载完成解压缩后在idea的里面打开终端。

ps：命令有可能运行失败，那就是没有用管理员打开idea的原因导致 

3.输入下载相关依赖的命令

npm install

4.运行项目的命令

npm run serve

5.然后把给到的地址浏览器打开就可以了

 三、代码的展示(这个点的内容仅供阅览，实际意义不大)

 HomeView.vue

  1. <template>
  2.     <el-container style="min-height: 100vh">
  3.       <el-aside width="sideWidth+'px'" style="background-color: rgb(255,255,255)"> <!--width="sideWidth+'px'"导航栏动态宽度-->
  4.         <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
  5.         background-color="rgb(48,65,86)"
  6.                  text-color="#fff"
  7.                  active-text-color="#ffd04b"
  8.                  :collapse-transition="false"
  9.                  :collapse="isCollapse"
  10.         > <!--active-text-color="#ffd04b"点击导航栏文字时候高亮黄色。  :collapse-transition="false"关闭动画（为了收缩导航栏做铺垫）
  11.         :collapse="isCollapse"控制展开折叠
  12.         -->
  13.           <div style="height: 60px; line-height: 60px; text-align: center">
  14.             <img src="../assets/logo.png" alt="" style="width: 30px;position: relative; top: 10px;margin-right: 10px">
  15.             <b style="color: white" v-show="logoTextShow">后台管理系统</b>
  16.           </div>
  17.           <el-submenu index="1">
  18.             <template slot="title">
  19.               <i class="el-icon-message"></i>
  20.               <span slot="title">导航一</span>
  21.             </template>
  22.             <el-menu-item-group>
  23.               <template slot="title">分组一</template>
  24.               <el-menu-item index="1-1">选项1</el-menu-item>
  25.               <el-menu-item index="1-2">选项2</el-menu-item>
  26.             </el-menu-item-group>
  27.             <el-menu-item-group title="分组2">
  28.               <el-menu-item index="1-3">选项3</el-menu-item>
  29.             </el-menu-item-group>
  30.             <el-submenu index="1-4">
  31.               <template slot="title">选项4</template>
  32.               <el-menu-item index="1-4-1">选项4-1</el-menu-item>
  33.             </el-submenu>
  34.           </el-submenu>
  35.           <el-submenu index="2">
  36.             <template slot="title"><i class="el-icon-menu"></i>
  37.               <span slot="title">导航二</span>
  38.             </template>
  39.             <el-menu-item-group>
  40.               <template slot="title">分组一</template>
  41.               <el-menu-item index="2-1">选项1</el-menu-item>
  42.               <el-menu-item index="2-2">选项2</el-menu-item>
  43.             </el-menu-item-group>
  44.             <el-menu-item-group title="分组2">
  45.               <el-menu-item index="2-3">选项3</el-menu-item>
  46.             </el-menu-item-group>
  47.             <el-submenu index="2-4">
  48.               <template slot="title">选项4</template>
  49.               <el-menu-item index="2-4-1">选项4-1</el-menu-item>
  50.             </el-submenu>
  51.           </el-submenu>
  52.           <el-submenu index="3">
  53.             <template slot="title"><i class="el-icon-setting"></i>
  54.               <span slot="title">导航三</span>
  55.             </template>
  56.             <el-menu-item-group>
  57.               <template slot="title">分组一</template>
  58.               <el-menu-item index="3-1">选项1</el-menu-item>
  59.               <el-menu-item index="3-2">选项2</el-menu-item>
  60.             </el-menu-item-group>
  61.             <el-menu-item-group title="分组2">
  62.               <el-menu-item index="3-3">选项3</el-menu-item>
  63.             </el-menu-item-group>
  64.             <el-submenu index="3-4">
  65.               <template slot="title">选项4</template>
  66.               <el-menu-item index="3-4-1">选项4-1</el-menu-item>
  67.             </el-submenu>
  68.           </el-submenu>
  69.         </el-menu>
  70.       </el-aside>
  71.  
  72.       <el-container>
  73.           <el-header style="font-size: 12px;border-bottom: 1px solid #ccc; line-height: 60px;display:flex">
  74.             <div style="flex: 1; font-size: 25px">
  75.                   <!-- 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/460357
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。