1、配置index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
blogweb
安装依赖字体图标
1
2
npm i font-awesome
npm i ionicons
main.js引入：
1
2
import '../node_modules/font-awesome/css/font-awesome.min.css'
import '../node_modules/ionicons/dist/css/ionicons.min.css'
static 新增css文件夹，用来存放AdminLTE相关样式文件，结构如下：
index.css
1
2
@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: '
'
})
复制代码
index.html 配置body样式
复制代码
复制代码
layout文件夹新建 Header.vue
此时，Layout.vue代码如下：
+ View Code
Header.vue代码如下：
+ View Code
运行，会出现如下错误：
1
2
3
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文件，具体取决于自定义文件夹结构，配置如下：
1
2
3
4
//AdminLTE.min.css
.layout-boxed {
background: url('../../img/boxed-bg.jpg') repeat fixed
}
再运行，发现排版是乱的，如下：
这时候没办法，我只能卸载bootstrap，直接引用AdminLTE默认的bootstrap文件了。也可以安装指定版本，默认安装最新版！
1
npm uninstall bootstrap
同样在static文件夹下新增文件夹，plugin
并把bootstrap 复制进去
再配置main.js,把路径配置问当前路径：
+ View Code
npm run dev运行：
OK，大功告成！其它的配置，同理！
最后结果：
https://www.cnblogs.com/wzgj/p/9957140.html
