本教程以本站vue.xhcss.com 标本 而写的教程！

简单点！，

我是用的layui前端后端的那css框架制作网页，未使用Js模块！

1、index引入全局CSS文件

我们打开static文件夹，新建一个main.css文件！

然后打开index.html文件，引入css!

<link rel="stylesheet/css" type="text/css" href="/static/css/main.css">

然后main.css内

@import 'layui.css';
@import 'admin.css';

我们引入layui的2个css文件！ 里面可能有图片！需要修改下路劲即可！ 不然报错！

2、确定网页，构建组件

然后我们知道网页包含！

1、构建nav和menu组件

所以我们先做一个nav 和menu的组件进行使用！

首先我们/src/components文件夹中新建header.vue文件！

<template>
<div class="layui-header">
<!-- 头部区域 -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item layadmin-flexible" lay-unselect>
<a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
<i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="#" target="_blank" title="前台">
<i class="layui-icon layui-icon-website"></i>
</a>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;" layadmin-event="refresh" title="刷新">
<i class="layui-icon layui-icon-refresh-3"></i>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<input
type="text"
placeholder="搜索..."
autocomplete="off"
class="layui-input layui-input-search"
layadmin-event="serach"
lay-action="template/search.html?keywords="
/>
</li>
<span class="layui-nav-bar" style="left: 38px; top: 48px; width: 0px; opacity: 0;"></span>
</ul>
<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
<li class="layui-nav-item" lay-unselect>
<a lay-href="app/message/index.html" layadmin-event="message" lay-text="消息中心">
<i class="layui-icon layui-icon-notice"></i>

<!-- 如果有新消息，则显示小圆点 -->
<span class="layui-badge-dot"></span>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="javascript:;" layadmin-event="theme">
<i class="layui-icon layui-icon-theme"></i>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="javascript:;" layadmin-event="note">
<i class="layui-icon layui-icon-note"></i>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="javascript:;" layadmin-event="fullscreen">
<i class="layui-icon layui-icon-screen-full"></i>
</a>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;">
<cite>贤心</cite>
<span class="layui-nav-more"></span>
</a>
<dl class="layui-nav-child">
<dd>
<a lay-href="set/user/info.html">基本资料</a>
</dd>
<dd>
<a lay-href="set/user/password.html">修改密码</a>
</dd>
<hr />
<dd layadmin-event="logout" style="text-align: center;">
<a>退出</a>
</dd>
</dl>
</li>

<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="javascript:;" layadmin-event="about">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
<a href="javascript:;" layadmin-event="more">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
<span class="layui-nav-bar"></span>
</ul>
</div>
</template>

<script>
export default {
name: 's-head'
}
</script>

<style>
</style>

自己写头部哈！

然后我们打开index.html! 

引入组件

import headers from './components/header'

使用组件

components: {headers }

<headers></headers>

完整代码

<template>
<div id="app">
<headers></headers>
</div>
</template>
<script>
import headers from './components/header'
export default {
name: 'app',
components: {headers}
}
</script>
<style scoped lang='less'>

</style>

然后我们就可以自行写css了！

用同样的方法引入menu

menu文件

<template>
<div
    class="layui-side layui-side-menu"
    id="menu"
  >
<div class="layui-side-scroll">
<div
        class="layui-logo"
        lay-href="home/console.html"
      >
<span>xhcss{{be}}</span>
</div>
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item">
<router-link to="/">
<i class="layui-icon layui-icon-home"></i>
<cite>首页</cite>
</router-link>
</li>
<li
          class="layui-nav-item"
          v-for="(items,index) in nbav"
          :class="{'layui-nav-itemed' :index===isShow}"
          :key="items.typename"
          @click="showToggle(index)"
        >
<a href="javascript:;">
<i class="layui-icon layui-icon-home"></i>
<cite>{{items.typename}}</cite>
<span class="layui-nav-more"></span>
</a>
<dl class="layui-nav-child">
<dd
              data-name="console"
              v-for="menu in items.submenu"
              @click="treeNavSwitch(menu.id)"
              :key="menu.link"
              :class="{'layui-this':menu.id == linkClick}"
            >
<router-link :to="{path:'/list',query: {id: menu.id}}">{{menu.typename}}</router-link>
</dd>
</dl>
</li>

<span
          class="layui-nav-bar"
          style="top: 28px; height: 0px; opacity: 0;"
        ></span>
</ul>
</div>
</div>
</template>

<script>
export default {
name: 'smenu',
// 定义属性，并设置初始值isshow判断nav显示,linkclick判断当前状态
data () {
return {
active: 'home',
isShow: 0,
be: '1',
linkClick: '',
nbav: [
{
typename: '主页',
icon: 'home',
submenu: [
{ link: '#/', typename: '首页', click: true },
{ link: '#/link2', typename: '织梦2' },
{ link: '#/link3', typename: '织梦3' }
]
}
]
}
},

// 点击菜单使用的函数
methods: {
showToggle: function (index) {
this.isShow = index
},
treeNavSwitch: function (nav) {
this.linkClick = nav
}
},
mounted () {
this.axios
.get('/type_ajax.php', {
params: {
type: 'topmenu',
typeid: 0,
field: 'typename,id,icon'
}
})
.then(response => {
this.nbav = response.data.data
})
.catch(function (error) {
// 请求失败处理
console.log(error)
})
}
}
</script>

<style>
</style>

import headers from './components/header'
import headers from './components/menu'

components: {headers,menu}