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';
  14. import '../node_modules/bootstrap/dist/js/bootstrap.min'
  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，大功告成！其它的配置，同理！

版权声明：本文为wzgj原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wzgj/p/9957140.html