caihg

 

Vue.js 递归组件实现树形菜单

最近看了 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>

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

截图效果如下：

项目代码在这里。

 

 

 

 

 

caihg

 

Vue 2.0 + Vue Router + Vuex

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

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

项目结构如图所示：

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

package.json：

+ View Code

webpack.config.js：

+ View Code

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

+ View Code

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

 

routes.js 内容如下：

+ View Code

main.vue 的内容如下：

<template><router-view></router-view> </template>

 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 目录，内容如下：

+ View Code

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

store.state.username = this.loginForm.username

 

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

 

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

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

container.vue 的内容如下：

+ View Code

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

+ View Code

 

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

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

左侧的导航放在 asideContainer 目录

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

+ View Code + View Code

 

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

userList.vue 中的内容如下：

<template><div>用户列表的内容</div> </template>

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

项目代码在 github 上

总结

以上是生活随笔为你收集整理的VUE 意淫笔记的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。