效果图
image.png
- 初始化一个VUE项目（略）
- 修改app.vue
复制node_modules/admin-lte/starter.html中<body></body>标签之间的div到app.vue的<template></template>中 - 修改webpack.base.config.js
- 头部加入：
const webpack = require("webpack")
- module.exports末尾加入：
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery":"jquery"
})
]
- 修改index.html的<body>
<body class="hold-transition skin-blue sidebar-mini">
- 修改main.js
import 'bootstrap/dist/css/bootstrap.min.css'
import 'admin-lte/dist/css/AdminLTE.min.css'
import 'admin-lte/dist/css/skins/skin-blue.min.css'
import 'font-awesome/css/font-awesome.min.css'
import 'ionicons/dist/css/ionicons.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import 'admin-lte/dist/js/adminlte.min'
- 修改eslintrc.js文件
env: {
browser: true,
jquery: true
},
- 导入用户头像文件
- 在static目录下新建img文件夹
- 将node_modules/admin-lte/dist/img/user2-160x160.jpg文件复制到img目录
- 将app.vue文件中的user2-160x160.jpg的路径改为“static/img/user2-160x160.jpg”
