[SpringBoot+VueJs] 3.2 Admin-LTE介绍

目录

  1. 环境搭建
  2. 后端
    2.1 数据库设计
    2.2 SpringBoot + Mybatis
    2.3 SpringBoot+RestfulAPI
  3. 前端
    3.1 VueJS 2.0 + Webpack工程介绍
    3.2 Admin-LTE介绍及使用
    3.3 VueJS一些基础知识
    3.4 项目中用到的和VueJS的开源组件

1 admin-LTE是什么?

admin-LTE,是一个UI的框架。它主要提供仪表盘式的前端样式。大大节省了前端开发的成本。它基于Bootstrap3。

2 Admin-LTE详细介绍

需要这个Index.html(这里请在官方网站上下载源码包)
整个样子:

Snip20170712_181.png

这里分几部分:

2.1 <head>

这里和传统的HTML的head并无两样,都是引入的CSS样式:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Dashboard</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="plugins/morris/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

2.2 <body>

整个Body是在<div class="wrapper">里。
然后里面分了几部分:

  1. <header>标签的内容,主要是页面的上面头部信息。
header
  1. <aside class="main-sidebar">,主要是左侧边栏信息。
aside
  1. <div class="content-wrapper">,主要是除了上部和左侧边栏的内容区。
content
  1. <footer class="main-footer">,页脚信息:
footer
  1. <aside class="control-sidebar control-sidebar-dark">。右侧伸缩边栏,如果需要的话可以用。
image.png

一个空白的页面可以从starter.html开始构造

3 根据我们的需要改造

我们既然要做单页应用,必须要改在这个starter.html。
所以:
第一步:改造页面,使之能够挂载我们的vue app。


image.png

可以看到,我们将整个body的内容,复制给id = “app”了。这样的话,只要我们的main vue实例挂载在这个id=“app”上,即可。就会成为我们的整个工程的入口。

第二步:挂载vue.app:
回顾下 3.1 VueJS 2.0 + Webpack工程介绍,里我们通过webpack生成的工程模板。
打开里面的main.js,是这样的:

import Vue from 'vue'
import App from './App.vue'
new Vue({
  // el: '#app',
  template: '<App/>',
  components: { App }
}).$mount('#app')

这里的意思就是通过Vue构造函数生成的实例,mount(挂载)到id = “app”整个view-model上。从而实现我们整个MVVM整合Admin-LTE成功。

下面请使用npm run dev。看看是否能够加载页面。

4 admin-LTE的配置

这里不做赘述,请参考Admin-LTE的官方解读。
如果你下载源码包到本地应该是这个目录:
file:///Users/xxx/Documents/AdminLTE-2.3.11/documentation/index.html
线上的是:https://adminlte.io/docs/2.4/installation

我这里大部分的js css都是用cdn来load的。是的,为什么不用呢?
可以从这里搜索:http://www.bootcdn.cn/

源码

Git Hub Demo

推荐阅读更多精彩内容