首頁目前長這樣：原本打算用Laravel-mix做前端工程流，隻可惜能力有限，沒有成功，放棄瞭。最終選擇瞭直接使用vue 2和element ui的cdn地址。以下記錄步驟：html：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!– import CSS –>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css
">
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
</head>
<body>
<div id="app">
<div class="container" style="width:1200px;margin:0 auto;">
<div class="topbar" >
<el-row>
<el-col :span="6"><div class="grid-content" style="max-width: 100px;">
<img data-v-73637230="" src="" alt="element-logo" class="nav-logo">
</div> </el-col>
<el-col :span="18"><div style="width:300px;" class="grid-content">
<el-input v-model="input" placeholder="請輸入內容"></el-input>
</div> </el-col>
</el-row>
</div>
<el-divider></el-divider>
<div class="main" >
<el-row>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-tree current-node-key=3 v-bind:highlight-current="hi" node-key="id" :default-expanded-keys="[1]" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
</el-col>
<el-col :span="18">
<div id="content" style="height:1000px;overflow: scroll;" class="grid-content page-component__scroll el-scrollbar">
{{!!$content!!}}
</div></el-col>
</el-row>
</div>
<el-backtop target=".page-component__scroll">
<div class="el-backtop" style="right: 40px; bottom: 40px;"><i class="el-icon-caret-top"></i></div>
</el-backtop>
</div>
</div>
</body>
<!– import Vue before Element –>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!– import JavaScript –>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
visible: false,
treeData:eval('{{!!$menu!!}}'),
input: '搜索文檔',
defaultProps: {
children: 'children',
label: 'label'
},
hi:true
}
},
methods: {
handleNodeClick(data) {
console.log(data);
if(!data.parentId){
return false;
}
location.href='/'+data.id;
}
}
})
</script>
</html>
使用瞭element中的layout做頁面佈局。左側導航使用瞭tree組件。註意：拿到後端的json數據後，需要eval將json字符串轉成對象。後端數據庫存儲的文本內容就是markdown格式。markdown格式在前端無法直接顯示，所以在輸出前轉化成html瞭，使用的這個包composer require erusev/parsedown。菜單因為是無限菜單，所以要用遞歸去找子菜單：function getCategory($data, $parent_id = 0)
{
$tree = array();
foreach ($data as $k => $v) {
if ($v["parentId"] == $parent_id) {
unset($data[$k]);
if (!empty($data)) {
$children = self::getCategory($data, $v["id"]);
if (!empty($children)) {
$v["children"] = $children;
}
}
$v['label'] = $v['name'];
if($v['id'] == 4){
$v['highlight-current'] = true;
}
$tree[] = $v;
}
}
return $tree;
}明天做什麼明天做搜索，使用Laravel Scount。希望一切順利。