zwy-utils-cli v0.0.1

简述

1、elementUI
2、登录时，存储用户信息在localStorage
  systemToken // 使用token
  authorPower // 菜单权限路由  跳转路由时只有包含在里面才能进入
  breadcrumb  // 根据当前路由  定义面包碎及导航栏
  menuList     // 左边菜单栏渲染  登录过滤不必要的路由(如没权限进入)
  ...  // 其它用户信息
3、组件细化
  父子通讯有数据变化，组件统一使用v-model
4、更改路由push和replace原生方法 具体看 /router/before.js
5、列表页 统一调用 <searchList />
  isRender刷新列表
  beforeFunc方法 设置单个checkbox禁用disabled
  action 列表接口
  不需要的传递的字段 将其设为_开头 params会自动过滤
6、详情页
  统一调用 <detail-demo :id="" />
  共用 创建与详情及修改
  对应id必传 即使是创建也要加上 例：/detail?id(不赋值)  详情则赋上对应的id
  onBefore方法 修改需要的回显值（对应的值是数组 但后台返回字符串）
  action 列表接口
  不需要的传递的字段 将其设为_开头 params会自动过滤
7、/layout/layout.vue
  刷新页面后；该path定义仓库信息
  onRouterChange 监听路由变化 做一系列操作(注：不在路由全部beforeEach设置)
    定义面包碎及导航栏
    跳转路由时只有包含在里面才能进入
    菜单栏expand展开内容和选中当前
    ...
8、404页 样式定义为fixed，内部直接赋一张图片
9、接口调用
  使用action仓库形式封装  mapActions调用
  方法在utils/index.js
10、公用样式表和图片资源位置统一放在 /assets
11、公用方法及变量统一放在 /utils
12、公用组件统一放在 /components  需要定义全局组件 可在index.js设置
13、__bus标记总线
  组件table utils.__bus.$on('列表接口', 方法)
           utils.__bus.$off('列表接口')
  详情更新成功  utils.__bus.$emit('列表接口')
  

文件

/pubilc
  /json        // mock数据
  index.html
/src
  /assets
    *.png/jpg  // 图片
    main.scss  // 主样式
  /components
    detail.vue // 详情组件
    form.vue
    index.js   // 当前所有组件集合
    searchList.vue   // 列表组件
    table.vue
    upload.vue
    ...
  /router
    before.js  // vue.use()之前配置
    index.js 
    routes.js  // path配置
  /store
    http.js    // 接口action封装
    index.js   // 配置state、mutation、action
  /utils
    global.js  // 设置特定变量
    index.js   // 定义特定function
  /views
    /login
      login.vue   // 登录页
    /layout
      layout.vue   // 内页
      cache.vue    // 导航缓存栏
      header.vue   // 头部
      menu.vue     // 左边菜单栏
      tidings.vue  // 消息
    ...
  App.vue
  main.js
.gitignore     // 忽略git提交文件
babel.config.js
package.json   // 安装包信息
README.md
vue.config.js  // vue配置

store

index.js 正常的state/mutation/action
http.js 接口封装位置

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' })