Vue使用Bootstrap实现AdminLTE风格（仿CoPilot）

最新推荐文章于 2025-06-29 09:08:38 发布

tjzc1352640

最新推荐文章于 2025-06-29 09:08:38 发布

阅读量7.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： bootstrap vue 前端 adminlte css

本文链接：https://blog.csdn.net/tjzc1352640/article/details/72865160

前端学习专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何从头使用Vue搭建一个类似CoPilot的AdminLTE风格前端模板。首先新建Vue项目，然后将CoPilot的静态资源集成到Vue的static文件夹中。接着，修改index.html以引入必要的静态库，并根据需要调整和删除代码。将Dash.vue组件引入并配置路由，最后通过在components目录下添加和注册Vue组件，实现不同页面效果。完成这些步骤后，一个基础的dash界面便呈现出来。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue从头搭建CoPilot

CoPilot是使用Vue搭建的AdminLTE的前端模板，由于需要使用其中的一部分功能，因此就从头开始搭建一个入门CoPilot模板。

新建Vue模板文件夹-vue-admin
npm install vue-cli -g vue init webpack vue-admin
下载CoPilot 模板，由于CoPilot中用到了许多css库，需要将模板中的static文件夹复制到将用的Vue模板中，合并原有的static文件夹。static 文件夹中有css样式库、js库和图片，如果相应的库有更新可以从官网下载更新库替换。

修改自己创建的vue-admin文件夹中的index.html文件，注入静态库（这里可以根据CoPilot中的index.html注入），由于部分功能没有用到，因此删减了一本分代码（没看懂的代码）。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>vue-admin</title>
  <link rel="shortcut icon" type="image/x-icon" href="static/img/favicon.ico"/>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/>
  <link rel="stylesheet" href="/static/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/static/css/skin-blue.min.css">
  <link rel="stylesheet" href="/static/js/plugins/pace/pace.min.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
  <div id="app"></div>
  <script src="/static/js/plugins/jQuery/jQuery-2.2.0.min.js"></script>
  <script src="/static/js/plugins/bootstrap/bootstrap.min.js"></script>
  <script src="/static/js/plugins/AdminLTE/app.min.js"></script>
  <script src="/static/js/plugins/pace/pace.min.js"></script>
  <script src="/static/js/copilot.js"></script>
   <!-- built files will be auto injected -->
</body>
</html>

如果需要像CoPilot一样使用Dash面板，则将Dash.vue复制到components文件夹下，然后在index.js中引入Dash.vue，修改routes。其他按照CoPilot可以完成

import Dash from '@/components/Dash'
Vue.use(Router)
export default new Router({
  routes: [
      {
          path: '/',
          // name: 'Hello',
          component: Dash
          }
    ]
})