美文网首页
Manhattan-fe项目

Manhattan-fe项目

作者: 彭奕泽 | 来源:发表于2018-08-29 14:29 被阅读0次

1. 安装vueAdmin-template

2. 安装vue-element-admin

3.

  1. 顶栏左侧在components的breadcrumb里改
  2. 顶栏右侧在/views/layout/components/Navbar
  3. app-main在views/dashboard/index.vue改,引入用户信息的方法在这里面

4. 步骤

  • 访问顾乡服务器:local.localhost:${port}/api
  • 访问线上:public.localhost:${port}/api
  • npm start 开启本地服务
  • npm run build:server 打包

5. 技巧

  1. 在main.js(入口文件)写上
export default ({ Vue }) => {
  Vue.directive('focus', {
    // When the bound element is inserted into the DOM...
    inserted(el) {
      // Focus the element
      el.focus();
    },
  });
};
  1. 在拦截器里写一个response.data.data,这样所有数据都是直接获得到data

  2. 在页面里即使没东西也可以把<footer>撑到底,在元素上写了个align: center布局到中间

<div class="footer" align="center">
  display: flex;
  flex-direction: column;
  justify-content: space-between;
</div>
  1. 隐藏边栏
    store.dispatch('CloseSideBar', { withoutAnimation: false })
  2. 解决ios移动端滑动问题
    Google的
  3. vue自定义指令,实现自动聚焦
    必须找到input元素才能用focus,并且需要setTimeout
//main.js
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted(el) {
    // Focus the element
    // if (el === input) {执行focus} else {找它子元素里的input},针对el-input改的
    if (el.tagName === 'INPUT') {
      setTimeout(() => {
        el.focus()
      }, 0)
    } else {
      for (const i in el.children) {
        if (el.children[i].tagName === 'INPUT') {
          setTimeout(() => {
            el.children[i].focus()
          }, 0)
        }
      }
    }
  }
})
  1. promise.all
    在文本行标注面板用promise.all,因为用forEach的时候循环不会等待上一次循环结束,会同时发几个请求,所以最后用promise.all来等待所有请求结束(同时发几个请求要比一个一个发快一点)
  2. 实时更新
    在APP.vue里加了个interval,定时更新时间
  3. es6语法
    接收对象作为参数时,可以这样写,更加清晰
export function submitTextError({ blockId, app }) { // {blockId: 123}
  return request.post('/admin/mark/markAsError', { blockId, app })
}

10 不能把箭头函数用在watch里,例如

watch: {
  a: () => {...}  // 报错!
}

6. element-ui

1. 验证功能

  1. :rules="rules2",rules2里写的就是valide的时候用的东西,用valide一般在submit的时候,把rules2里的全部验证一遍,相当于验证所有的input
  2. prop=checkPass,prop里写的是valideField的key,this.$refs.ruleForm2.validateField('checkPass');,可以对单个input在blur的时候用

7. 移动端pc端的检测

  1. 通过@/views/layout/mixin/ResizeHander.js,在layout里引入,mixins里用

相关文章

  • Manhattan-fe项目

    1. 安装vueAdmin-template 2. 安装vue-element-admin 3. 顶栏左侧在com...

  • 项目,项目

    现在是下午2:26,准备出去见客户,生命不是在于运动,是在于奔跑!有时候真的挺累的。大部分人都说顾客是上帝。但很明...

  • 项目、项目组合、项目集

    项目组合、项目集、项目 项目组合可包含项目组合(portfolio)、项目集(program)、项目 项目集可包含...

  • 项目找项目

    一位小蘑菇弱弱地问我,怎么找项目啊?我忽然想起昨天写的《让书推荐书》,灵机一动:“让项目找项目。”又开始...

  • 标题

    你好 现在还好吗?情调item 项目 项目子项目子项目 项目 项目 这是什么 项目 项目 还好吗?

  • 2018-05-28

    项目流程 项目启动 (开通告知) 项目规划 (业务访谈) 项目执行 (项目培训) 项目监控 (数据录入) 项目收尾...

  • 14-项目管理辅助知识

    立项管理 大纲 项目建议书 项目可行性研究(项目论证、项目评估) 项目审批 项目招投标 项目合同谈判与签订 项目建...

  • markdown 学习

    MarkDown 学习 无序列表: 项目1 项目2 项目3 有序列表: 项目1 项目2 项目3

  • Django项目——创建项目

    前提:Python3 、pip 、PyCharm客户端 都已经安装好了。方法百度一下。 1.安装Django 我的...

  • django项目:创建项目

    最近想通过django搭建一个项目,为了不半途而废,决定记录一下搭建项目的整个过程。 1.通过pycharm创建一...

网友评论

      本文标题:Manhattan-fe项目

      本文链接:https://www.haomeiwen.com/subject/yklbpftx.html