最近看了 Vue.js 的递归组件，实现了一个最基本的树形菜单。

项目结构：

 

main.js 作为入口，很简单：

1 2 3 4 5 6 7 8 9

import  Vue from  'vue'   Vue.config.debug =  true   import  main from  './components/main.vue' new  Vue({    el:  '#app' ,    render: h => h(main) })

它引入了一个组件 main.vue：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

<template>    <div  class = "tree-menu" >      <ul v- for = "menuItem in theModel" >        <my-tree :model= "menuItem" ></my-tree>      </ul>    </div> </template>   <script> var  myData = [    {      'id' :  '1' ,      'menuName' :  '基础管理' ,      'menuCode' :  '10' ,      'children' : [        {          'menuName' :  '用户管理' ,          'menuCode' :  '11'        },        {          'menuName' :  '角色管理' ,          'menuCode' :  '12' ,          'children' : [            {              'menuName' :  '管理员' ,              'menuCode' :  '121'            },            {              'menuName' :  'CEO' ,              'menuCode' :  '122'            },            {              'menuName' :  'CFO' ,              'menuCode' :  '123'            },            {              'menuName' :  'COO' ,              'menuCode' :  '124'            },            {              'menuName' :  '普通人' ,              'menuCode' :  '124'            }          ]        },        {          'menuName' :  '权限管理' ,          'menuCode' :  '13'        }      ]    },    {      'id' :  '2' ,      'menuName' :  '商品管理' ,      'menuCode' :  ''    },    {      'id' :  '3' ,      'menuName' :  '订单管理' ,      'menuCode' :  '30' ,      'children' : [        {          'menuName' :  '订单列表' ,          'menuCode' :  '31'        },        {          'menuName' :  '退货列表' ,          'menuCode' :  '32' ,          'children' : []        }      ]    },    {      'id' :  '4' ,      'menuName' :  '商家管理' ,      'menuCode' :  '' ,      'children' : []    } ];   import  myTree from  './common/treeMenu.vue' export  default  {    components: {      myTree    },    data() {      return  {        theModel: myData      }    } } </script>

该文件引入了树形组件 treeMenu.vue：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<template>    <li>      <span @click= "toggle" >        <i v- if = "isFolder"  class = "icon"  : class = "[open ? 'folder-open': 'folder']" ></i>        <i v- if = "!isFolder"  class = "icon file-text" ></i>        { { model.menuName }}      </span>      <ul v-show= "open"  v- if = "isFolder" >        <tree-menu v- for = "item in model.children"  :model= "item" ></tree-menu>      </ul>    </li> </template>   <script> export  default  {    name:  'treeMenu' ,    props: [ 'model' ],    data() {      return  {        open:  false ,        isFolder:  true      }    },    computed: {      isFolder:  function () {        return  this .model.children &&  this .model.children.length      }    },    methods: {      toggle:  function () {        if  ( this .isFolder) {          this .open = ! this .open        }      }    } } </script>   <style> ul {    list-style: none; } i.icon {    display: inline-block;    width: 15px;    height: 15px;    background-repeat: no-repeat;    vertical-align: middle; } .icon.folder {    background-image: url(/src/assets/folder.png); } .icon.folder-open {    background-image: url(/src/assets/folder-open.png); } .icon.file-text {    background-image: url(/src/assets/file-text.png); } .tree-menu li {    line-height: 1.5; } </style>

就这么简单。这篇文章还真没什么可写的，权当记录吧。

截图效果如下：

。

 

 

 

 

 

 

用 Vue.js 2.x 与相配套的 Vue Router、Vuex 搭建了一个最基本的后台管理系统的骨架。

当然先要安装 node.js（包括了 npm）、vue-cli

项目结构如图所示：

assets 中是静态资源，components 中是组件（以 .vue 为后缀名的文件），store 中是使用了 vuex 的 js 文件。

package.json：

webpack.config.js：

项目的入口 js 文件 main.js：

该文件引用了路由配置文件 routes.js 和主入口的组件 main.vue，其中 main.vue 在 components 目录

 

routes.js 内容如下：

main.vue 的内容如下：

 store.js 在 store 目录，内容如下：

1 2 3 4 5 6 7 8 9 10

import  Vue from  'vue' import  Vuex from  'vuex'   Vue.use(Vuex)   export  default  new  Vuex.Store({    state: {      username:  ''    } })

 

后台都是登录成功后跳转到主页面

 

界面的 UI 用的是开源的 element-ui

login.vue 位于 login 目录，内容如下：

在登录事件中，将用户名传递给 store 中的 state.username，以便在其它组件中获取： 

store.state.username = this.loginForm.username

 

登录后的界面，默认跳转到主页：

 

通过 vuex 获取到了登录的用户名称（caihg）；当然，如果刷新当前页面，用户名称就没了。 

头部在 container 目录，其中有三个组件

container.vue 的内容如下：

headerNav.vue 中就是头部导航的各种链接：

 

点击头部的导航，下面的内容相应地切换

 其中左侧部分也是导航，点击也要跟随切换

左侧的导航放在 asideContainer 目录

 platform.vue 与 product.vue 内容相似；只是前者包括了样式，后者没有（相同的样式写一份就够了，如果多写了，也会重复渲染）

 

左侧导航对应的内容分别在不同的目录（根据功能划分）

userList.vue 中的内容如下：

至此完成，后台管理系统的大致骨架就是这样了。

在 github 上