1、配置index.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <title>blogweb</title>

</head>

<body>

  <div id="app"></div>

  <!-- built files will be auto injected -->

</body>

</html>

安装依赖字体图标

npm i font-awesome

npm i ionicons

main.js引入：

import '../node_modules/font-awesome/css/font-awesome.min.css'

import '../node_modules/ionicons/dist/css/ionicons.min.css'

static 新增css文件夹，用来存放AdminLTE相关样式文件，结构如下：

index.css

@import './main/AdminLTE.min.css';

@import './skins/_all-skins.min.css';

配置main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import router from './router'

//布局模板页

import Layout from "./components/layout/Layout";

//第三方插件

import $ from 'jquery';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

import '../node_modules/font-awesome/css/font-awesome.min.css'

import '../node_modules/ionicons/dist/css/ionicons.min.css'

import '../static/css/index.css';

import '../node_modules/bootstrap/dist/js/bootstrap.min'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { Layout },

  template: '<Layout/>'

})

index.html 配置body样式

<body class="hold-transition skin-blue sidebar-mini">

layout文件夹新建 Header.vue

此时，Layout.vue代码如下：

<template>

    <div class="wrapper">

        <v-header></v-header>

        <div class="container">

            <keep-alive>

                <router-view></router-view>

            </keep-alive>

        </div>

        <footer>footer</footer>

    </div>

</template>

<script>

import Header from "./Header";

export default {

  name: "App",

  components: {

    "v-header": Header

  }

};

</script>

Header.vue代码如下：

<template>

    <header class="main-header">

        <!-- Logo -->

        <a href="index2.html" class="logo">

            <!-- mini logo for sidebar mini 50x50 pixels -->

            <span class="logo-mini"><b>A</b>LT</span>

            <!-- logo for regular state and mobile devices -->

            <span class="logo-lg"><b>Admin</b>LTE</span>

        </a>

        <!-- Header Navbar: style can be found in header.less -->

        <nav class="navbar navbar-static-top">

            <!-- Sidebar toggle button-->

            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">

                <span class="sr-only">Toggle navigation</span>

            </a>

            <div class="navbar-custom-menu">

                <ul class="nav navbar-nav">

                    <!-- Messages: style can be found in dropdown.less-->

                    <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">4</span>

                        </a>

                        <ul class="dropdown-menu">

                            <li class="header">You have 4 messages</li>

                            <li>

                                <!-- inner menu: contains the actual data -->

                                <ul class="menu">

                                    <li>

                                        <!-- start message -->

                                        <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 mins</small>

                                            </h4>

                                            <p>Why not buy a new awesome theme?</p>

                                        </a>

                                    </li>

                                    <!-- end message -->

                                    <li>

                                        <a href="#">

                                            <div class="pull-left">

                                                <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">

                                            </div>

                                            <h4>

                                                AdminLTE Design Team

                                                <small><i class="fa fa-clock-o"></i> 2 hours</small>

                                            </h4>

                                            <p>Why not buy a new awesome theme?</p>

                                        </a>

                                    </li>

                                    <li>

                                        <a href="#">

                                            <div class="pull-left">

                                                <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">

                                            </div>

                                            <h4>

                                                Developers

                                                <small><i class="fa fa-clock-o"></i> Today</small>

                                            </h4>

                                            <p>Why not buy a new awesome theme?</p>

                                        </a>

                                    </li>

                                    <li>

                                        <a href="#">

                                            <div class="pull-left">

                                                <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">

                                            </div>

                                            <h4>

                                                Sales Department

                                                <small><i class="fa fa-clock-o"></i> Yesterday</small>

                                            </h4>

                                            <p>Why not buy a new awesome theme?</p>

                                        </a>

                                    </li>

                                    <li>

                                        <a href="#">

                                            <div class="pull-left">

                                                <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">

                                            </div>

                                            <h4>

                                                Reviewers

                                                <small><i class="fa fa-clock-o"></i> 2 days</small>

                                            </h4>

                                            <p>Why not buy a new awesome theme?</p>

                                        </a>

                                    </li>

                                </ul>

                            </li>

                            <li class="footer"><a href="#">See All Messages</a></li>

                        </ul>

                    </li>

                    <!-- Notifications: style can be found in dropdown.less -->

                    <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">10</span>

                        </a>

                        <ul class="dropdown-menu">

                            <li class="header">You have 10 notifications</li>

                            <li>

                                <!-- inner menu: contains the actual data -->

                                <ul class="menu">

                                    <li>

                                        <a href="#">

                                            <i class="fa fa-users text-aqua"></i> 5 new members joined today

                                        </a>

                                    </li>

                                    <li>

                                        <a href="#">

                                            <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the

                                            page and may cause design problems

                                        </a>

                                    </li>

                                    <li>

                                        <a href="#">

                                            <i class="fa fa-users text-red"></i> 5 new members joined

                                        </a>

                                    </li>

                                    <li>

                                        <a href="#">

                                            <i class="fa fa-shopping-cart text-green"></i> 25 sales made

                                        </a>

                                    </li>

                                    <li>

                                        <a href="#">

                                            <i class="fa fa-user text-red"></i> You changed your username

                                        </a>

                                    </li>

                                </ul>

                            </li>

                            <li class="footer"><a href="#">View all</a></li>

                        </ul>

                    </li>

                    <!-- Tasks: style can be found in dropdown.less -->

                    <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">9</span>

                        </a>

                        <ul class="dropdown-menu">

                            <li class="header">You have 9 tasks</li>

                            <li>

                                <!-- inner menu: contains the actual data -->

                                <ul class="menu">

                                    <li>

                                        <!-- Task item -->

                                        <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% Complete</span>

                                                </div>

                                            </div>

                                        </a>

                                    </li>

                                    <!-- end task item -->

                                    <li>

                                        <!-- Task item -->

                                        <a href="#">

                                            <h3>

                                                Create a nice theme

                                                <small class="pull-right">40%</small>

                                            </h3>

                                            <div class="progress xs">

                                                <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">

                                                    <span class="sr-only">40% Complete</span>

                                                </div>

                                            </div>

                                        </a>

                                    </li>

                                    <!-- end task item -->

                                    <li>

                                        <!-- Task item -->

                                        <a href="#">

                                            <h3>

                                                Some task I need to do

                                                <small class="pull-right">60%</small>

                                            </h3>

                                            <div class="progress xs">

                                                <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">

                                                    <span class="sr-only">60% Complete</span>

                                                </div>

                                            </div>

                                        </a>

                                    </li>

                                    <!-- end task item -->

                                    <li>

                                        <!-- Task item -->

                                        <a href="#">

                                            <h3>

                                                Make beautiful transitions

                                                <small class="pull-right">80%</small>

                                            </h3>

                                            <div class="progress xs">

                                                <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">

                                                    <span class="sr-only">80% Complete</span>

                                                </div>

                                            </div>

                                        </a>

                                    </li>

                                    <!-- end task item -->

                                </ul>

                            </li>

                            <li class="footer">

                                <a href="#">View all tasks</a>

                            </li>

                        </ul>

                    </li>

                    <!-- User Account: style can be found in dropdown.less -->

                    <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 Pierce</span>

                        </a>

                        <ul class="dropdown-menu">

                            <!-- User image -->

                            <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. 2012</small>

                                </p>

                            </li>

                            <!-- Menu Body -->

                            <li class="user-body">

                                <div class="row">

                                    <div class="col-xs-4 text-center">

                                        <a href="#">Followers</a>

                                    </div>

                                    <div class="col-xs-4 text-center">

                                        <a href="#">Sales</a>

                                    </div>

                                    <div class="col-xs-4 text-center">

                                        <a href="#">Friends</a>

                                    </div>

                                </div>

                                <!-- /.row -->

                            </li>

                            <!-- Menu Footer-->

                            <li class="user-footer">

                                <div class="pull-left">

                                    <a href="#" class="btn btn-default btn-flat">Profile</a>

                                </div>

                                <div class="pull-right">

                                    <a href="#" class="btn btn-default btn-flat">Sign out</a>

                                </div>

                            </li>

                        </ul>

                    </li>

                    <!-- Control Sidebar Toggle Button -->

                    <li>

                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>

                    </li>

                </ul>

            </div>

        </nav>

    </header>

</template>

运行，会出现如下错误：

This relative module was not found:

* ./img/boxed-bg.jpg in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./static/css/index.css

指的是AdminLTE.min.css文件下img/boxed-bg.jpg路径找不到

同样在static文件夹下新增img，并且把AdminLTE 下 img文件夹复制过去，同样需要去修改css文件，具体取决于自定义文件夹结构，配置如下：

//AdminLTE.min.css

.layout-boxed {

  background: url('../../img/boxed-bg.jpg') repeat fixed

}

再运行，发现排版是乱的，如下：

这时候没办法，我只能卸载bootstrap，直接引用AdminLTE默认的bootstrap文件了。也可以安装指定版本，默认安装最新版！

npm uninstall bootstrap

同样在static文件夹下新增文件夹，plugin

并把bootstrap 复制进去

再配置main.js,把路径配置问当前路径：

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import router from './router'

//布局模板页

import Layout from "./components/layout/Layout";

//第三方插件

import $ from 'jquery';

import '../static/plugin/bootstrap/dist/css/bootstrap.min.css'

import '../node_modules/font-awesome/css/font-awesome.min.css'

import '../node_modules/ionicons/dist/css/ionicons.min.css'

import '../static/css/index.css';

import '../static/plugin/bootstrap/dist/js/bootstrap.min'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { Layout },

  template: '<Layout/>'

})

　　npm run dev运行：

OK，大功告成！其它的配置，同理！

最后结果：

vue学习（三）完善模板页(bootstrap+AdminLTE)的更多相关文章

  1. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  2. Vue学习2：模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  4. 三 vue学习三 从读懂一个Vue项目开始

    源码地址:     https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config ...

  5. vue学习三:生命周期钩子

    生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...

  6. Vue学习(三)-Vue-router路由的简单使用

    一.Vue-Router环境的安装: 如果使用vue-cli脚手架搭建,项目创建过程中会提示你自否选择使用vue-router,选择使用即可, 二.路由学习 1.路由的配置    vue-cli项目自 ...

  7. Vue学习三：v-on:click命令及v-html命令学习

    本文为博主原创,未经允许不得转载: 第一部分: v-on:click 命令讲解及使用方法 <!DOCTYPE html> <html lang="zh"> ...

  8. 学习笔记37_MVC模板页

    ASPX母版页: 1.添加一个母版页,位置../Views/Shared,有 <asp:ContentPlaceHolder ID = "ContentPlaceHolder1&quo ...

  9. vue 学习三 v-model 表单绑定输入 以及修饰符的用处

    v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...

随机推荐

  1. postman传递当前时间戳

    有时我们在请求接口时,需要带上当前时间戳这种动态参数,那么postman能不能自动的填充上呢. 1请求动态参数(例如时间戳) 直接在参数值写 {{$timestamp}} 如下: 我们也可以使用pos ...

  2. 图解kubernetes调度器预选设计实现学习

    Scheduler中在进行node选举的时候会首先进行一轮预选流程,即从当前集群中选择一批node节点,本文主要分析k8s在预选流程上一些优秀的筛选设计思想,欢迎大佬们指正 1. 基础设计 1.1 预 ...

  3. IDEA使用 磨刀霍霍向代码

    工欲善其事,必先利其器 ,当下有数不清的 Java 程序员将石器时代的 Eclipse 替换成了现代化的智能开发工具 InteliJ IDEA ,写代码的小日子过得不亦乐乎(玩笑话,两者各有千秋,看个 ...

  4. Qt Installer Framework翻译(1)

    IFW概览 Qt Installer Framework 提供了一组工具和程序来创建安装程序,并在不重写源代码的情况下将它们部署到所有受支持的桌面 Qt 平台上.安装程序具有本地化外观,并且可以感知运 ...

  5. C++ lambda 分析

    lambda 表达式分析 构造闭包:能够捕获作用域中变量的匿名函数的对象,Lambda 表达式是纯右值表达式,其类型是独有的无名非联合非聚合类类型,被称为闭包类型(closure type),所以在声 ...

  6. .NET 框架设计 - 模式、配置、工具 Demo 搜索

    ps:http://www.ituring.com.cn/article/195770 看完第二章,我也忍了!但是随着第三章“副本”的开启,我的阅读速度开始慢慢的减缓,虽然对其中每一个程序模式的理论也 ...

  7. es6 promise 简单总结

    话不多说,直捣主题. promise用途:异步编程的一种解决方案. 优点:比传统的解决方案——回调函数和事件——更合理和更强大. 三种状态:pending(进行中).fulfilled(已成功)和re ...

  8. python实例：自动爬取豆瓣读书短评，分析短评内容

    思路: 1.打开书本“更多”短评,复制链接 2.脚本分析链接,通过获取短评数,计算出页码数 3.通过页码数,循环爬取当页短评 4.短评写入到txt文本 5.读取txt文本,处理文本,输出出现频率最高的 ...

  9. day05【数组】

    day05[数组] 1.数组 概念:是一种容器,可以同时存放多个数据. 特点: 数组是一种引用数据类型 数组当中的多个数据,类型必须统一 数组的长度在程序的运行期间不可改变 初始化:在内存当中创建一个 ...

  10. mysql 基本常用语句

    1.展示当前数据库 所有表名(前提必须进入数据库,进入数据库语句:[use 数据库名;])mysql> show create table 表名; 2.看mysql支持哪些存储引擎:mysql& ...