1 使用 vue 创建 admin 项目

使用 vue 创建前端项目网上有很多教程，这里简单说一下。
首先需要有 npm 和 node，先下载这两个工具。brew install npm 和brew install node，完成后可以npm -v和node -v检查，若显示版本号说明安装成功。(新版本 node 自带 npm)
然后在 idea 打开 terminal 输入npm install -g @vue/cli 下载 vue 脚手架，安装成功后输入 vue create admin 创建一个新的 vue 项目，这里一直 y 走完即可。
进入 admin 文件夹后执行 npm run dev ，可以在http://localhost:8080看到 vue 的欢迎页面。
如果 main.js 文件的 import 报红，应该是 es 的版本问题，修改成 es6 后就消失了。
在这里插入图片描述

2 集成 bootstrap 后台管理模板 ace

ace 是集成 bootstrap 的一个后台管理模板，可以直接去 github链接下载，导入到 admin 中到 public 文件夹中。接着使用 ace 模板中的页面，首先是 login 页面，先将 ace 文件夹中的 login.html 文件中的 head 标签内的内容和 script 引入 js 的部分拷贝到 public 文件夹中的 index.html。其中，在 login.html 中，<script src="assets/js/jquery-2.1.4.min.js"></script> 这种绝对路径引用的方式复制到 index.html 中后会读取不到，需要改成<script src="<%= BASE_URL %>ace/assets/js/jquery-2.1.4.min.js"></script>。全部替换后 index.html 代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta charset="utf-8" /><title>Login Page - Ace Admin</title><meta name="description" content="User login page" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /><!-- bootstrap & fontawesome --><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/bootstrap.min.css" /><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/font-awesome/4.5.0/css/font-awesome.min.css" /><!-- text fonts --><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/fonts.googleapis.com.css" /><!-- ace styles --><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace.min.css" /><!--[if lte IE 9]><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-part2.min.css" /><![endif]--><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-rtl.min.css" /><!--[if lte IE 9]><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-ie.min.css" /><![endif]--><!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --><!--[if lte IE 8]><script src="<%= BASE_URL %>ace/assets/js/html5shiv.min.js"></script><script src="<%= BASE_URL %>ace/assets/js/respond.min.js"></script><![endif]--><!--[if !IE]> --><script src="<%= BASE_URL %>ace/assets/js/jquery-2.1.4.min.js"></script><!-- <![endif]--><!--[if IE]><script src="<%= BASE_URL %>ace/assets/js/jquery-1.11.3.min.js"></script><![endif]--><script type="text/javascript">if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");</script></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

这时运行 serve ，进入 localhost8080 如果可以看到引用的 bootstrap 等文件说明引入成功。
在这里插入图片描述
接着把 login.html 中的 div 复制到 app.vue 中的 template 中，删除其他没有用到的 css 之类的部分。

<template><div class="main-container"...><!-- /.main-container -->
</template><script>$('body').attr('class', 'login-layout light-login');
export default {name: 'App'
}
</script>

其中，因为$('body').attr('class', 'login-layout light-login');复制错误，报错 no-undef ，最终修改了 package.json 中 es 的 rules 解决，rules 也可能在 .eslintrc.js 中。

{"name": "admin","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"core-js": "^3.6.5","vue": "^3.0.0"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0-0"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/vue3-essential","eslint:recommended"],"parserOptions": {"parser": "babel-eslint"},"rules": {"no-undef": "off"}},"browserslist": ["> 1%","last 2 versions","not dead"]
}

这里就成功的将 login 页面引入到 admin 项目中。

3 集成路由 vue-route

下面先在 src 文件夹新建一个 router.js 文件来作为路由，同时新建一个 view/login.vue 文件，把之前 app.vue 中的代码粘贴进去，最后在 main.js 中将 router 添加进 vue 根目录。

修改后的 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,  //将router.js中的路由添加进apprender: h => h(App),
}).$mount('#app')

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/login.vue'Vue.use(Router)export default new Router({mode: 'history',  //路由设置为history模式base: process.env.BASE_URL,routes: [{path: '*', redirect: '/login', // *匹配所有字符重定向到login页面}, {path: '/login',component: Login,}]
})

app.vue

<template><div id="app"><router-view/></div>
</template>

添加了登陆页面之后添加一个管理页面，这里用 blank.html 。复制 blank 中的两段 div 代码，其中因为包含 script ，所以会报错，这里把中间的两段 script 代码删掉。这个版本的 vue 语法中，template 只能包含一个 div ，所以用一个 div 将上面两个 div 包住。

admin.vue 的最终代码如下：

<template><div><div id="navbar" class="navbar navbar-default          ace-save-state"...><div class="main-container ace-save-state" id="main-container"...><!-- /.main-container --></div>
</template>

这时访问 http://localhost:8080/admin 背景会有问题，因为在 login 中添加的背景在 admin 中依然存在。
这时需要修改 login 和 admin 中的 script 部分，添加下面代码：

<script>export default {name: "login",mounted: function(){$('body').removeClass('no-skin');$('body').attr('class', 'login-layout light-login');},methods: {login(){this.$router.push("/admin")}}}
</script>

admin.vue

<script>export default {name: "admin",mounted: function(){$('body').removeClass('login-layout light-login');$('body').attr('class', 'no-skin');},methods: {}}
</script>

4 后台管理页面开发

这里修改一下 admin 页面的布局，删除大部分多余的模块，之后得到的代码如下：

<template><div><div id="navbar" class="navbar navbar-default          ace-save-state"><div class="navbar-container ace-save-state" id="navbar-container"><button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar"><span class="sr-only">Toggle sidebar</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><div class="navbar-header pull-left"><a href="index.html" class="navbar-brand"><small><i class="fa fa-leaf"></i>在线视频后台管理</small></a></div><div class="navbar-buttons navbar-header pull-right" role="navigation"><ul class="nav ace-nav"><li class="grey dropdown-modal"><a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="ace-icon fa fa-tasks"></i><span class="badge badge-grey">4</span></a><ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close"><li class="dropdown-header"><i class="ace-icon fa fa-check"></i>4 Tasks to complete</li><li class="dropdown-content"><ul class="dropdown-menu dropdown-navbar"><li><a href="#"><div class="clearfix"><span class="pull-left">Software Update</span><span class="pull-right">65%</span></div><div class="progress progress-mini"><div style="width:65%" class="progress-bar"></div></div></a></li><li><a href="#"><div class="clearfix"><span class="pull-left">Hardware Upgrade</span><span class="pull-right">35%</span></div><div class="progress progress-mini"><div style="width:35%" class="progress-bar progress-bar-danger"></div></div></a></li><li><a href="#"><div class="clearfix"><span class="pull-left">Unit Testing</span><span class="pull-right">15%</span></div><div class="progress progress-mini"><div style="width:15%" class="progress-bar progress-bar-warning"></div></div></a></li><li><a href="#"><div class="clearfix"><span class="pull-left">Bug Fixes</span><span class="pull-right">90%</span></div><div class="progress progress-mini progress-striped active"><div style="width:90%" class="progress-bar progress-bar-success"></div></div></a></li></ul></li><li class="dropdown-footer"><a href="#">See tasks with details<i class="ace-icon fa fa-arrow-right"></i></a></li></ul></li><li class="purple dropdown-modal"><a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="ace-icon fa fa-bell icon-animated-bell"></i><span class="badge badge-important">8</span></a><ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close"><li class="dropdown-header"><i class="ace-icon fa fa-exclamation-triangle"></i>8 Notifications</li><li class="dropdown-content"><ul class="dropdown-menu dropdown-navbar navbar-pink"><li><a href="#"><div class="clearfix"><span class="pull-left"><i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>New Comments</span><span class="pull-right badge badge-info">+12</span></div></a></li><li><a href="#"><i class="btn btn-xs btn-primary fa fa-user"></i>Bob just signed up as an editor ...</a></li><li><a href="#"><div class="clearfix"><span class="pull-left"><i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>New Orders</span><span class="pull-right badge badge-success">+8</span></div></a></li><li><a href="#"><div class="clearfix"><span class="pull-left"><i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>Followers</span><span class="pull-right badge badge-info">+11</span></div></a></li></ul></li><li class="dropdown-footer"><a href="#">See all notifications<i class="ace-icon fa fa-arrow-right"></i></a></li></ul></li><li class="green dropdown-modal"><a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="ace-icon fa fa-envelope icon-animated-vertical"></i><span class="badge badge-success">5</span></a><ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close"><li class="dropdown-header"><i class="ace-icon fa fa-envelope-o"></i>5 Messages</li><li class="dropdown-content"><ul class="dropdown-menu dropdown-navbar"><li><a href="#" class="clearfix"><img src="assets/images/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" /><span class="msg-body"><span class="msg-title"><span class="blue">Alex:</span>Ciao sociis natoque penatibus et auctor ...</span><span class="msg-time"><i class="ace-icon fa fa-clock-o"></i><span>a moment ago</span></span></span></a></li><li><a href="#" class="clearfix"><img src="assets/images/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" /><span class="msg-body"><span class="msg-title"><span class="blue">Susan:</span>Vestibulum id ligula porta felis euismod ...</span><span class="msg-time"><i class="ace-icon fa fa-clock-o"></i><span>20 minutes ago</span></span></span></a></li><li><a href="#" class="clearfix"><img src="assets/images/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" /><span class="msg-body"><span class="msg-title"><span class="blue">Bob:</span>Nullam quis risus eget urna mollis ornare ...</span><span class="msg-time"><i class="ace-icon fa fa-clock-o"></i><span>3:15 pm</span></span></span></a></li><li><a href="#" class="clearfix"><img src="assets/images/avatars/avatar2.png" class="msg-photo" alt="Kate's Avatar" /><span class="msg-body"><span class="msg-title"><span class="blue">Kate:</span>Ciao sociis natoque eget urna mollis ornare ...</span><span class="msg-time"><i class="ace-icon fa fa-clock-o"></i><span>1:33 pm</span></span></span></a></li><li><a href="#" class="clearfix"><img src="assets/images/avatars/avatar5.png" class="msg-photo" alt="Fred's Avatar" /><span class="msg-body"><span class="msg-title"><span class="blue">Fred:</span>Vestibulum id penatibus et auctor  ...</span><span class="msg-time"><i class="ace-icon fa fa-clock-o"></i><span>10:09 am</span></span></span></a></li></ul></li><li class="dropdown-footer"><a href="inbox.html">See all messages<i class="ace-icon fa fa-arrow-right"></i></a></li></ul></li><li class="light-blue dropdown-modal"><a data-toggle="dropdown" href="#" class="dropdown-toggle"><img class="nav-user-photo" src="../../public/ace/assets/images/avatars/user.jpg" alt="Jason's Photo" /><span class="user-info"><small>Welcome,</small>Jason</span><i class="ace-icon fa fa-caret-down"></i></a><ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"><li><a href="#"><i class="ace-icon fa fa-cog"></i>Settings</a></li><li><a href="profile.html"><i class="ace-icon fa fa-user"></i>Profile</a></li><li class="divider"></li><li><a href="#"><i class="ace-icon fa fa-power-off"></i>Logout</a></li></ul></li></ul></div></div><!-- /.navbar-container --></div><div class="main-container ace-save-state" id="main-container"><div id="sidebar" class="sidebar                  responsive                    ace-save-state"><div class="sidebar-shortcuts" id="sidebar-shortcuts"><div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large"><button class="btn btn-success"><i class="ace-icon fa fa-signal"></i></button><button class="btn btn-info"><i class="ace-icon fa fa-pencil"></i></button><button class="btn btn-warning"><i class="ace-icon fa fa-users"></i></button><button class="btn btn-danger"><i class="ace-icon fa fa-cogs"></i></button></div><div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini"><span class="btn btn-success"></span><span class="btn btn-info"></span><span class="btn btn-warning"></span><span class="btn btn-danger"></span></div></div><!-- /.sidebar-shortcuts --><ul class="nav nav-list"><li class=""><a href="/admin/welcome.html"><i class="menu-icon fa fa-tachometer"></i><span class="menu-text"> welcome </span></a><b class="arrow"></b></li><li class="active open"><a href="#" class="dropdown-toggle"><i class="menu-icon fa fa-file-o"></i><span class="menu-text">系统管理<span class="badge badge-primary">5</span></span><b class="arrow fa fa-angle-down"></b></a><b class="arrow"></b><ul class="submenu"><li class=""><a href="faq.html"><i class="menu-icon fa fa-caret-right"></i>用户管理</a><b class="arrow"></b></li><li class=""><a href="error-404.html"><i class="menu-icon fa fa-caret-right"></i>权限管理</a><b class="arrow"></b></li></ul></li></ul><!-- /.nav-list --><div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"><i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i></div></div><div class="main-content"><div class="main-content-inner"><div class="page-content"><div class="row"><div class="col-xs-12"><!-- PAGE CONTENT BEGINS --><router-view/><!-- PAGE CONTENT ENDS --></div><!-- /.col --></div><!-- /.row --></div><!-- /.page-content --></div></div><!-- /.main-content --><div class="footer"><div class="footer-inner"><div class="footer-content"><span class="bigger-120"><span class="blue bolder">Ace</span>Application &copy; 2013-2014</span>&nbsp; &nbsp;<span class="action-buttons"><a href="#"><i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i></a><a href="#"><i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i></a><a href="#"><i class="ace-icon fa fa-rss-square orange bigger-150"></i></a></span></div></div></div><a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"><i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i></a></div><!-- /.main-container --></div>
</template><script>export default {name: "admin",mounted: function(){$('body').removeClass('login-layout light-login');$('body').attr('class', 'no-skin');},methods: {}}
</script>

这里用到的一些 js 没有引入，所以右上角的图标点击没有反应，接着在 public 文件夹中的 index.js 添加，整理后代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta charset="utf-8" /><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>Login Page - Ace Admin</title><meta name="description" content="User login page" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /><!-- bootstrap & fontawesome --><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/bootstrap.min.css" /><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/font-awesome/4.5.0/css/font-awesome.min.css" /><!-- text fonts --><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/fonts.googleapis.com.css" /><!-- ace styles --><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace.min.css" /><!--[if lte IE 9]><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-part2.min.css" /><![endif]--><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-rtl.min.css" /><!--[if lte IE 9]><link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-ie.min.css" /><![endif]--><!--  zTree jquery树插件  --><link rel="stylesheet" href="<%= BASE_URL %>zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css"><!--  自定义CSS  --><link rel="stylesheet" href="<%= BASE_URL %>static/css/style.css" type="text/css"><!--  富文本编辑器  --><link href="https://cdn.jsdelivr.net/npm/summernote@0.8.15/dist/summernote.min.css" rel="stylesheet"><!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --><!--[if lte IE 8]><script src="<%= BASE_URL %>ace/assets/js/html5shiv.min.js"></script><script src="<%= BASE_URL %>ace/assets/js/respond.min.js"></script><![endif]--><!--[if !IE]> --><script src="<%= BASE_URL %>ace/assets/js/jquery-2.1.4.min.js"></script><!-- <![endif]--><!--[if IE]><script src="<%= BASE_URL %>ace/assets/js/jquery-1.11.3.min.js"></script><![endif]--><script type="text/javascript">if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");</script><script src="<%= BASE_URL %>ace/assets/js/bootstrap.min.js"></script><!-- page specific plugin scripts --><!--[if lte IE 8]><script src="<%= BASE_URL %>ace/assets/js/excanvas.min.js"></script><![endif]--><script src="<%= BASE_URL %>ace/assets/js/jquery-ui.custom.min.js"></script><script src="<%= BASE_URL %>ace/assets/js/jquery.ui.touch-punch.min.js"></script><script src="<%= BASE_URL %>ace/assets/js/jquery.easypiechart.min.js"></script><script src="<%= BASE_URL %>ace/assets/js/jquery.sparkline.index.min.js"></script><script src="<%= BASE_URL %>ace/assets/js/jquery.flot.min.js"></script><script src="<%= BASE_URL %>ace/assets/js/jquery.flot.pie.min.js"></script><script src="<%= BASE_URL %>ace/assets/js/jquery.flot.resize.min.js"></script><!-- ace scripts --><script src="<%= BASE_URL %>ace/assets/js/ace-elements.min.js"></script><script src="<%= BASE_URL %>ace/assets/js/ace.min.js"></script></head>
<body>
<noscript><strong>We're sorry but admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

右上角的图标可以点击，但是图片没有显示，因为 admin.vue 中的 nav-user-photo标签引用不到图片，这里修改一下 src="../../public/ace/assets/images/avatars/user.jpg"，这样就可以引用到 ace 中的图片了。（…/表示上层文件夹）

最后的 login 页面和 admin 页面如下：
在这里插入图片描述