花样
先分享一下整个过程中玩出的各种花样
- 在整个路由配置的过程中纠结的点在于手动输入也会进行权限判断从而进行下一步是否跳转的操作,但是在created() 这个生命周期给玩笑了,这里你只要进行路由跳转router.push()无论在地址栏输入什么都是跟刷新一样。
- tag栏的逻辑根据操作需求缤纷变化,这里玩了很久,(右键批量操作,tag多了可以左右移动,侧边栏也能选中tag,tag选中也能响应到侧边栏,选中tag会进行位置判断保证选中的tag可视不会,关闭tag后退能重新创建,直接输入权限内的路由也能创建tag)
- 从0-1需要时间作为支持,基础不行实践来凑。
项目链接
点击这里
阶段目标
|系统管理容器
|侧边栏
|navbar
|tagbar
|main
依赖的ui库
ElementUi-Plus
可能使用到的组件
- NavMenu
- Popover
- Tag
- Icon
- Button
项目目录构建
项目
|-node_modules
|-public
|-favicon.ico
|-index.html
|-src
|-assets
|-components
|-router
|-index.ts
|-store
|-modules
|-tag.ts
|-permission.ts
|-user.ts
|-getter.ts
|-index.ts
|-style
|-utils
|-cookie.ts
|-request.ts
|-views
|-index
|-Navbar
|-Index.vue
|-NavMenu
|-Index.vue
|-Index.vue
...
|-App.vue
|-main.ts
|-shims-vue.d.ts
|-.browserslistrc
|-.env.development
|-.env.production
|-.env.test
|-.gitattributes
|-.gitignore
|-babel.config.js
|-package-lock.json
|-package.json
|-README.md
|-tsconfig.json
|-vue.config.js
|-yarn.lock
页面搭建
搭建思路
|通过ElementUi-Plus进行UI的选择
|根据权限获得的路由存放到vuex中进行管理
|tag栏也存放到vuex中管理,存放类型由路由获得
|vuex的路由管理导航栏
|vuex的tag管理tag栏
|根据个人审美对页面美感和流畅度进行优化