@zhangweiyuan/vue-manage v0.0.15

技术支持

vue + elementUI

localStorage

登录的用户信息 admin: {
  jurisdiction // 菜单权限路由  跳转路由时只有包含在里面才能进入
  breadcrumb  // 根据当前路由  定义面包碎及导航栏
  menuList     // 左边菜单栏渲染  登录过滤不必要的路由(如没权限进入)
  systemToken // 使用token
  ...  // 其它用户信息
}
页码 size: {
  [对应的每个action]: number
  ...
}

文件位置

/pubilc
  /json        // mock数据
  index.html
/src
  /assets      // 图片和样式
  /components  // 公共组件
  /router      // 路由
  /store       // 仓库
  /utils       // 插件
  /views       // 业务文件
  App.vue
  main.js
.gitignore     // 忽略git提交文件
.npmignore     // 忽略npm提交文件
babel.config.js
package.json   // 安装包信息
README.md
vue.config.js  // vue配置

/components

需要定义全局组件 可在utils/install.js设置

/router

createRoutes.js // 异步加载其他路由
promission.js   // beforeEach规则
routes.js       // 更多业务路由
meta: {
  author    // 是否验证登录状态 boolean 必填
  keepAlive // 是否缓存组件
  parent    // 指定路由的父集  多个以逗号隔开
  ...
}
beforeEnter: (to, from, next) => {   // 解决多次进入路由的mounted是否触发规则
  const bool = BE(to, 'bannerId')    // BE为 utils/beforeEnter.js文件
  to.meta.title = bool ? '详情demo页面' : '添加demo页面'
  next()
}

/store

state: {
  admin  // 登录用户信息
  cache  // 导航缓存栏
}

vue语法

<child 
  :is="动态组建"
  :foo.sync="bar"
  :[变量]="变量"
  @[变量]="方法"
  v-for="u of items"
  @scroll.passive=""
  @click.ctrl.native="">
  <template #default="scope">
    {{ scope.title }}
  </template>
</child>

<sub @change="$emit('update:foo')" />

export defaut {
  inheritAttrs: false,
  mixins: [mixin],
  components: {
    COM: () => import('./A')
  },
  model: {
    prop: info,
    event: 'send'
  },
  provider: {
    content: ''
  },
  inject: ['content'],
  computed: {
    get() {},
    set(v) {}
  },
  props: {
    info: Object,
    A: {
      type: String,
      required: true,
      default: 0,
      validator(v) {
        return true
      }
    }
  },
  mounted() {
    this.$root
    this.$parent
    this.$refs
  },
  directives: {
    focus: {
      // 指令的定义
      bind(el, binding, vnode) {
        el.innerHTML = binding.value
      }
    }
  },
  filters: {
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}


Vue.use({
  install(Vue, options) {
    Vue.myGlobalMethod = () => { }
    Vue.directive('my-directive', {
      bind(el, binding, vnode, oldVnode) { }
    })
    Vue.mixin({
      created() { }
    })
    Vue.prototype.$myMethod = (methodOptions) => { }
  }
}, { title: 'h11' })