Vue2集成AdminLte 后台模板
# Vue2集成AdminLte 后台模板
前提条件 安装最新版的nodejs
- 创建vue工程
npm install --global vue-cli
vue init webpack vue-adminlte
cd vue-adminlte
npm install
npm run dev 此时可以验证 http://localhost:8080/#/ 默认的demo
2 引入jQuery , 创建src/lib/jquery-vender.js , 修改src/main.js , src/components/HelloWorld.vue
jquery-vender.js : 引入jquery， 导出全局变量$, jQuery
import $ from 'jquery'
window.$ = $
window.jQuery = $
export default $main.js , 增加第六行 import ‘./lib/jquery-vender.js’
5 import router from './router'
6 import './lib/jquery-vender.js'HelloWorld.vue, 删除不要的 ， 稍微做修改
<template>
<div class="hello" id="msg">
<h1>{{ msg }}h1>
div>
template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
script>修改完后， 执行npm i jquery –save , 从浏览器控制台进行测试jquery
$('#msg').text()3 安装bootstrap3.X
npm i bootstrap@3 --save在src/main.js 增加import ‘bootstrap’
import './lib/jquery-vender.js'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'修改HelloWorld.vue如下 ，在template加入代码
<template>
<div class="hello" id="msg">
<h1>{{ msg }}h1>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title" id="myModalLabel">Modal titleh4>
div>
<div class="modal-body">
...
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
<button type="button" class="btn btn-primary">Save changesbutton>
div>
div>
div>
div>
div>
template>4 使用font-awesome , 先安装以下font-awesome
npm i font-awesome --save 在main.js添加
import 'font-awesome/css/font-awesome.css'HelloWorld.vue作如下修改 ， 最后可以看到可爱的小图标出现在了页面上
<h1><i class='fa fa-fw fa-amazon'>i>{{ msg }}h1>5 集成admin-lte正题上来
首先安装admin-lte
npm i admin-lte --save修改src/main.js , 引入admin-lte样式js文件
7 import 'bootstrap'
8 import 'admin-lte'
9 import 'bootstrap/dist/css/bootstrap.css'
10 import 'font-awesome/css/font-awesome.css'
11 import 'admin-lte/dist/css/AdminLTE.min.css'
12 import 'admin-lte/dist/css/skins/_all-skins.min.css'创建starter.vue ， 把admin-lte源码中间部分copy过来如下内容
<template>
<div class="wrapper">
<header class="main-header">
<a href="index2.html" class="logo">
<span class="logo-mini"><b>Ab>LTspan>
<span class="logo-lg"><b>Adminb>LTEspan>
a>
<nav class="navbar navbar-static-top" role="navigation">
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigationspan>
a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o">i>
<span class="label label-success">4span>
a>
<ul class="dropdown-menu">
<li class="header">You have 4 messagesli>
<li>
<ul class="menu">
<li>
<a href="#">
<div class="pull-left">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
div>
<h4>
Support Team
<small><i class="fa fa-clock-o">i> 5 minssmall>
h4>
<p>Why not buy a new awesome theme?p>
a>
li>
ul>
li>
<li class="footer"><a href="#">See All Messagesa>li>
ul>
li>
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o">i>
<span class="label label-warning">10span>
a>
<ul class="dropdown-menu">
<li class="header">You have 10 notificationsli>
<li>
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua">i> 5 new members joined today
a>
li>
ul>
li>
<li class="footer"><a href="#">View alla>li>
ul>
li>
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o">i>
<span class="label label-danger">9span>
a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasksli>
<li>
<ul class="menu">
<li>
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%small>
h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Completespan>
div>
div>
a>
li>
ul>
li>
<li class="footer">
<a href="#">View all tasksa>
li>
ul>
li>
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Piercespan>
a>
<ul class="dropdown-menu">
<li class="user-header">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012small>
p>
li>
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followersa>
div>
<div class="col-xs-4 text-center">
<a href="#">Salesa>
div>
<div class="col-xs-4 text-center">
<a href="#">Friendsa>
div>
div>
li>
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profilea>
div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign outa>
div>
li>
ul>
li>
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears">i>a>
li>
ul>
div>
nav>
header>
<aside class="main-sidebar">
<section class="sidebar">
<div class="user-panel">
<div class="pull-left image">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
div>
<div class="pull-left info">
<p>Alexander Piercep>
<a href="#"><i class="fa fa-circle text-success">i> Onlinea>
div>
div>
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search">i>
button>
span>
div>
form>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">HEADERli>
<li class="active"><a href="#"><i class="fa fa-link">i> <span>Linkspan>a>li>
<li><a href="#"><i class="fa fa-link">i> <span>Another Linkspan>a>li>
<li class="treeview">
<a href="#"><i class="fa fa-link">i> <span>Multilevelspan>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right">i>
span>
a>
<ul class="treeview-menu">
<li><a href="#">Link in level 2a>li>
<li><a href="#">Link in level 2a>li>
ul>
li>
ul>
section>
aside>
<div class="content-wrapper">
<section class="content-header">
<h1>
Page Header
<small>Optional descriptionsmall>
h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard">i> Levela>li>
<li class="active">Hereli>
ol>
section>
<section class="content container-fluid">
section>
div>
<footer class="main-footer">
<div class="pull-right hidden-xs">
Anything you want
div>
<strong>Copyright © 2016 <a href="#">Companya>.strong> All rights reserved.
footer>
<aside class="control-sidebar control-sidebar-dark">
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home">i>a>li>
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears">i>a>li>
ul>
<div class="tab-content">
<div class="tab-pane active" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activityh3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:;">
<i class="menu-icon fa fa-birthday-cake bg-red">i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthdayh4>
<p>Will be 23 on April 24thp>
div>
a>
li>
ul>
<h3 class="control-sidebar-heading">Tasks Progressh3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:;">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="pull-right-container">
<span class="label label-danger pull-right">70%span>
span>
h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%">div>
div>
a>
li>
ul>
div>
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Contentdiv>
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settingsh3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
label>
<p>
Some information about this general settings option
p>
div>
form>
div>
div>
aside>
<div class="control-sidebar-bg">div>
div>
template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
script>修改index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue2-adminltetitle>
head>
<body class="hold-transition skin-blue sidebar-mini">
<div id="app">div>
body>
html>
修改路由信息 src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import starter from '@/components/starter'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'starter',
component: starter
},
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld
}
]
})最后修改下 , 去掉默认的图片
<template>
<div id="app">
<router-view/>
div>
template>
<script>
export default {
name: 'app'
}
script>刷新页面可以观察到，admin-lte的starter页面了
最后源码可以在这找到
vue-adminlte github
仍然未写完 …