Project(3)-vue3.0+ts+elementUi-Plus

130 阅读2分钟

花样

先分享一下整个过程中玩出的各种花样

  1. 在整个路由配置的过程中纠结的点在于手动输入也会进行权限判断从而进行下一步是否跳转的操作,但是在created() 这个生命周期给玩笑了,这里你只要进行路由跳转router.push()无论在地址栏输入什么都是跟刷新一样。
  2. tag栏的逻辑根据操作需求缤纷变化,这里玩了很久,(右键批量操作,tag多了可以左右移动,侧边栏也能选中tag,tag选中也能响应到侧边栏,选中tag会进行位置判断保证选中的tag可视不会,关闭tag后退能重新创建,直接输入权限内的路由也能创建tag)
  3. 从0-1需要时间作为支持,基础不行实践来凑。

项目链接

点击这里

阶段目标

|系统管理容器
    |侧边栏
    |navbar
    |tagbar
    |main

依赖的ui库

ElementUi-Plus

可能使用到的组件

  • NavMenu
  • Popover
  • Tag
  • Icon
  • Button

项目目录构建

项目
|-node_modules
|-public
   |-favicon.ico
   |-index.html
|-src         // 主要目录@就是代表src
   |-assets   // 静态资源
   |-components // 公共组件
   |-router 
       |-index.ts // 路由注册
   |-store
       |-modules // vuex模型对象集合
           |-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 // 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

页面搭建

搭建ui:仿照vue-element-admin

搭建思路

|通过ElementUi-Plus进行UI的选择
    |根据权限获得的路由存放到vuex中进行管理
    |tag栏也存放到vuex中管理,存放类型由路由获得
          |vuex的路由管理导航栏
          |vuex的tag管理tag栏
|根据个人审美对页面美感和流畅度进行优化