1、配置index.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  8.   <title>blogweb</title>
  9. </head>
  10.  
  11. <body>
  12.   <div id="app"></div>
  13.   <!-- built files will be auto injected -->
  14. </body>
  15.  
  16. </html>

安装依赖字体图标

  1. npm i font-awesome
  2. npm i ionicons

main.js引入：

  1. import '../node_modules/font-awesome/css/font-awesome.min.css'
  2. import '../node_modules/ionicons/dist/css/ionicons.min.css'

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

index.css

  1. @import './main/AdminLTE.min.css';
  2. @import './skins/_all-skins.min.css';

配置main.js

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import router from './router'
  5. //布局模板页
  6. import Layout from "./components/layout/Layout";
  7. //第三方插件
  8. import $ from 'jquery';
  9. import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
  10. import '../node_modules/font-awesome/css/font-awesome.min.css'
  11. import '../node_modules/ionicons/dist/css/ionicons.min.css'
  12. import '../static/css/index.css';
  13.  
  14. import '../node_modules/bootstrap/dist/js/bootstrap.min'
  15.  
  16. Vue.config.productionTip = false
  17.  
  18. /* eslint-disable no-new */
  19. new Vue({
  20.   el: '#app',
  21.   router,
  22.   components: { Layout },
  23.   template: '<Layout/>'
  24. })

index.html 配置body样式

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

layout文件夹新建 Header.vue

此时，Layout.vue代码如下：

  1. <template>
  2.     <div class="wrapper">
  3.         <v-header></v-header>
  4.         <div class="container">
  5.             <keep-alive>
  6.                 <router-view></router-view>
  7.             </keep-alive>
  8.         </div>
  9.         <footer>footer</footer>
  10.     </div>
  11. </template>
  12.  
  13. <script>
  14. import Header from "./Header";
  15. export default {
  16.   name: "App",
  17.   components: {
  18.     "v-header": Header
  19.   }
  20. };
  21. </script>

Header.vue代码如下：

  1. <template>
  2.     <header class="main-header">
  3.         <!-- Logo -->
  4.         <a href="index2.html" class="logo">
  5.             <!-- mini logo for sidebar mini 50x50 pixels -->
  6.             <span class="logo-mini"><b>A</b>LT</span>
  7.             <!-- logo for regular state and mobile devices -->
  8.             <span class="logo-lg"><b>Admin</b>LTE</span>
  9.         </a>
  10.         <!-- Header Navbar: style can be found in header.less -->
  11.         <nav class="navbar navbar-static-top">
  12.             <!-- Sidebar toggle button-->
  13.             <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
  14.                 <span class="sr-only">Toggle navigation</span>
  15.             </a>
  16.  
  17.             <div class="navbar-custom-menu">
  18.                 <ul class="nav navbar-nav">
  19.                     <!-- Messages: style can be found in dropdown.less-->
  20.                     <li class="dropdown messages-menu">
  21.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  22.                             <i class="fa fa-envelope-o"></i>
  23.                             <span class="label label-success">4</span>
  24.                         </a>
  25.                         <ul class="dropdown-menu">
  26.                             <li class="header">You have 4 messages</li>
  27.                             <li>
  28.                                 <!-- inner menu: contains the actual data -->
  29.                                 <ul class="menu">
  30.                                     <li>
  31.                                         <!-- start message -->
  32.                                         <a href="#">
  33.                                             <div class="pull-left">
  34.                                                 <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  35.                                             </div>
  36.                                             <h4>
  37.                                                 Support Team
  38.                                                 <small><i class="fa fa-clock-o"></i> 5 mins</small>
  39.                                             </h4>
  40.                                             <p>Why not buy a new awesome theme?</p>
  41.                                         </a>
  42.                                     </li>
  43.                                     <!-- end message -->
  44.                                     <li>
  45.                                         <a href="#">
  46.                                             <div class="pull-left">
  47.                                                 <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  48.                                             </div>
  49.                                             <h4>
  50.                                                 AdminLTE Design Team
  51.                                                 <small><i class="fa fa-clock-o"></i> 2 hours</small>
  52.                                             </h4>
  53.                                             <p>Why not buy a new awesome theme?</p>
  54.                                         </a>
  55.                                     </li>
  56.                                     <li>
  57.                                         <a href="#">
  58.                                             <div class="pull-left">
  59.                                                 <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
  60.                                             </div>
  61.                                             <h4>
  62.                                                 Developers
  63.                                                 <small><i class="fa fa-clock-o"></i> Today</small>
  64.                                             </h4>
  65.                                             <p>Why not buy a new awesome theme?</p>
  66.                                         </a>
  67.                                     </li>
  68.                                     <li>
  69.                                         <a href="#">
  70.                                             <div class="pull-left">
  71.                                                 <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  72.                                             </div>
  73.                                             <h4>
  74.                                                 Sales Department
  75.                                                 <small><i class="fa fa-clock-o"></i> Yesterday</small>
  76.                                             </h4>
  77.                                             <p>Why not buy a new awesome theme?</p>
  78.                                         </a>
  79.                                     </li>
  80.                                     <li>
  81.                                         <a href="#">
  82.                                             <div class="pull-left">
  83.                                                 <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
  84.                                             </div>
  85.                                             <h4>
  86.                                                 Reviewers
  87.                                                 <small><i class="fa fa-clock-o"></i> 2 days</small>
  88.                                             </h4>
  89.                                             <p>Why not buy a new awesome theme?</p>
  90.                                         </a>
  91.                                     </li>
  92.                                 </ul>
  93.                             </li>
  94.                             <li class="footer"><a href="#">See All Messages</a></li>
  95.                         </ul>
  96.                     </li>
  97.                     <!-- Notifications: style can be found in dropdown.less -->
  98.                     <li class="dropdown notifications-menu">
  99.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  100.                             <i class="fa fa-bell-o"></i>
  101.                             <span class="label label-warning">10</span>
  102.                         </a>
  103.                         <ul class="dropdown-menu">
  104.                             <li class="header">You have 10 notifications</li>
  105.                             <li>
  106.                                 <!-- inner menu: contains the actual data -->
  107.                                 <ul class="menu">
  108.                                     <li>
  109.                                         <a href="#">
  110.                                             <i class="fa fa-users text-aqua"></i> 5 new members joined today
  111.                                         </a>
  112.                                     </li>
  113.                                     <li>
  114.                                         <a href="#">
  115.                                             <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
  116.                                             page and may cause design problems
  117.                                         </a>
  118.                                     </li>
  119.                                     <li>
  120.                                         <a href="#">
  121.                                             <i class="fa fa-users text-red"></i> 5 new members joined
  122.                                         </a>
  123.                                     </li>
  124.                                     <li>
  125.                                         <a href="#">
  126.                                             <i class="fa fa-shopping-cart text-green"></i> 25 sales made
  127.                                         </a>
  128.                                     </li>
  129.                                     <li>
  130.                                         <a href="#">
  131.                                             <i class="fa fa-user text-red"></i> You changed your username
  132.                                         </a>
  133.                                     </li>
  134.                                 </ul>
  135.                             </li>
  136.                             <li class="footer"><a href="#">View all</a></li>
  137.                         </ul>
  138.                     </li>
  139.                     <!-- Tasks: style can be found in dropdown.less -->
  140.                     <li class="dropdown tasks-menu">
  141.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  142.                             <i class="fa fa-flag-o"></i>
  143.                             <span class="label label-danger">9</span>
  144.                         </a>
  145.                         <ul class="dropdown-menu">
  146.                             <li class="header">You have 9 tasks</li>
  147.                             <li>
  148.                                 <!-- inner menu: contains the actual data -->
  149.                                 <ul class="menu">
  150.                                     <li>
  151.                                         <!-- Task item -->
  152.                                         <a href="#">
  153.                                             <h3>
  154.                                                 Design some buttons
  155.                                                 <small class="pull-right">20%</small>
  156.                                             </h3>
  157.                                             <div class="progress xs">
  158.                                                 <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  159.                                                     <span class="sr-only">20% Complete</span>
  160.                                                 </div>
  161.                                             </div>
  162.                                         </a>
  163.                                     </li>
  164.                                     <!-- end task item -->
  165.                                     <li>
  166.                                         <!-- Task item -->
  167.                                         <a href="#">
  168.                                             <h3>
  169.                                                 Create a nice theme
  170.                                                 <small class="pull-right">40%</small>
  171.                                             </h3>
  172.                                             <div class="progress xs">
  173.                                                 <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  174.                                                     <span class="sr-only">40% Complete</span>
  175.                                                 </div>
  176.                                             </div>
  177.                                         </a>
  178.                                     </li>
  179.                                     <!-- end task item -->
  180.                                     <li>
  181.                                         <!-- Task item -->
  182.                                         <a href="#">
  183.                                             <h3>
  184.                                                 Some task I need to do
  185.                                                 <small class="pull-right">60%</small>
  186.                                             </h3>
  187.                                             <div class="progress xs">
  188.                                                 <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  189.                                                     <span class="sr-only">60% Complete</span>
  190.                                                 </div>
  191.                                             </div>
  192.                                         </a>
  193.                                     </li>
  194.                                     <!-- end task item -->
  195.                                     <li>
  196.                                         <!-- Task item -->
  197.                                         <a href="#">
  198.                                             <h3>
  199.                                                 Make beautiful transitions
  200.                                                 <small class="pull-right">80%</small>
  201.                                             </h3>
  202.                                             <div class="progress xs">
  203.                                                 <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  204.                                                     <span class="sr-only">80% Complete</span>
  205.                                                 </div>
  206.                                             </div>
  207.                                         </a>
  208.                                     </li>
  209.                                     <!-- end task item -->
  210.                                 </ul>
  211.                             </li>
  212.                             <li class="footer">
  213.                                 <a href="#">View all tasks</a>
  214.                             </li>
  215.                         </ul>
  216.                     </li>
  217.                     <!-- User Account: style can be found in dropdown.less -->
  218.                     <li class="dropdown user user-menu">
  219.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  220.                             <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
  221.                             <span class="hidden-xs">Alexander Pierce</span>
  222.                         </a>
  223.                         <ul class="dropdown-menu">
  224.                             <!-- User image -->
  225.                             <li class="user-header">
  226.                                 <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  227.  
  228.                                 <p>
  229.                                     Alexander Pierce - Web Developer
  230.                                     <small>Member since Nov. 2012</small>
  231.                                 </p>
  232.                             </li>
  233.                             <!-- Menu Body -->
  234.                             <li class="user-body">
  235.                                 <div class="row">
  236.                                     <div class="col-xs-4 text-center">
  237.                                         <a href="#">Followers</a>
  238.                                     </div>
  239.                                     <div class="col-xs-4 text-center">
  240.                                         <a href="#">Sales</a>
  241.                                     </div>
  242.                                     <div class="col-xs-4 text-center">
  243.                                         <a href="#">Friends</a>
  244.                                     </div>
  245.                                 </div>
  246.                                 <!-- /.row -->
  247.                             </li>
  248.                             <!-- Menu Footer-->
  249.                             <li class="user-footer">
  250.                                 <div class="pull-left">
  251.                                     <a href="#" class="btn btn-default btn-flat">Profile</a>
  252.                                 </div>
  253.                                 <div class="pull-right">
  254.                                     <a href="#" class="btn btn-default btn-flat">Sign out</a>
  255.                                 </div>
  256.                             </li>
  257.                         </ul>
  258.                     </li>
  259.                     <!-- Control Sidebar Toggle Button -->
  260.                     <li>
  261.                         <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
  262.                     </li>
  263.                 </ul>
  264.             </div>
  265.         </nav>
  266.     </header>
  267. </template>

运行，会出现如下错误：

  1. This relative module was not found:
  2.  
  3. * ./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文件，具体取决于自定义文件夹结构，配置如下：

  1. //AdminLTE.min.css
  2. .layout-boxed {
  3.   background: url('../../img/boxed-bg.jpg') repeat fixed
  4. }

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

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

  1. npm uninstall bootstrap

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

并把bootstrap 复制进去

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

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import router from './router'
  5. //布局模板页
  6. import Layout from "./components/layout/Layout";
  7. //第三方插件
  8. import $ from 'jquery';
  9. import '../static/plugin/bootstrap/dist/css/bootstrap.min.css'
  10. import '../node_modules/font-awesome/css/font-awesome.min.css'
  11. import '../node_modules/ionicons/dist/css/ionicons.min.css'
  12. import '../static/css/index.css';
  13.  
  14. import '../static/plugin/bootstrap/dist/js/bootstrap.min'
  15.  
  16. Vue.config.productionTip = false
  17.  
  18. /* eslint-disable no-new */
  19. new Vue({
  20.   el: '#app',
  21.   router,
  22.   components: { Layout },
  23.   template: '<Layout/>'
  24. })

　　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. wireshark使用过程中，卡死未响应

    原因 : 未知 处理办法:1.重装wireshark ----------无效果 2.卸载有道词典-----------成功,wireshark正常运行,重装有道词典该问题必现,所以问题由有道词典引起 ...

  2. 一文熟练使用python mock

    mock作为python测试模拟对象工具,在单元测试当中使用较多,官方文档详细不够精简,这篇文章介绍mock常用的用法,以下为引用全文,留给自己和有需要的人查阅. https://realpython ...

  3. postman的测试,用对象接收所有的字符串

    1.post请求 Headers: Content-Type  application/json { "taskId":"1000001161", " ...

  4. phpstorm配置git并解决Terminal 中文乱码（Unicode 编码）的方法

    前言:在使用PHPstorm的时候,需要用到terminal,主要还是用这个操作git,但是在使用这个的时候会发现,代码里所有中文都是乱码状态,不利于使用,下面就来看看怎么解决这个问题 一.先在php ...

  5. Activiti CamelTask(骆驼任务)

    Activiti CamelTask(骆驼任务) 作者:Jesai 人生想讲个不成熟的建议 前言: Camel任务可以从Camel发送和介绍消息,由此强化了activiti的集成功能. 注意camel ...

  6. selenium chrome headless无界面引擎

    注意:PhantomJS已被舍弃 chrome headless 在打开浏览器之前添加参数 import time import sys from selenium import webdriver ...

  7. python模拟鼠标拖动操作的方法

    本文实例讲述了python模拟鼠标拖动操作的方法.分享给大家供大家参考.具体如下: pdf中的书签只有页码,准备把现有书签拖到一个目录中,然后添加自己页签.重复的拖动工作实在无趣,还是让程序帮我实现吧 ...

  8. object-c中的int NSInteger NSUInteger NSNumber辨析

    object-c中的int NSInteger NSUInteger NSNumber辨析 #import <Foundation/Foundation.h> int main(int a ...

  9. mysql--->权限管理原理和设置

    mysql 权限管理 mysql权限检查原理 权限检查两个阶段 你有没有权限链接上来 你有没有权限执行此操作 服务器如何判断用户用户有没有权限连接上来? 通过mysql库下的user表 查看:sele ...

  10. php--->注册模式

    注册模式 什么是注册树模式? 注册树模式当然也叫注册模式,注册器模式.注册树模式通过将对象实例注册到一棵全局的对象树上,需要的时候从对象树上采摘的模式设计方法. 优点:单例模式解决的是如何在整个项目中 ...