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 } ] })大功告成，現在可以看到最基本dash界面啦，可以通過在components文件夾下添加vue組件，然後註冊到index.js的routes數組下，即可看到每個組件的效果。（記得在App.vue中刪掉原來的頁面圖片等，具體可參考CoPilot中的App.vue）