开发常见问题集锦

2019-10-08 13:50 来源:未知

由于公司的前端初阶转向 VueJS,近来始于选择那几个框架进行支付,蒙受有个别主题素材记录下来,以备后用。
首要写一些 官方手册 上从不写,但是事实上支出中会碰着的难题,必要自然知识基础。

事关能力栈

  • CLI: Vue-CLI
  • UI: Element
  • HTML: Pug(Jade)
  • CSS: Less
  • JavaScript: ES6

polyfill 与 transform-runtime

率先,vue-cli 为大家机关增添了 babel-plugin-transform-runtime 那几个插件,该插件非常多情景下都运作如常,能够转移大多数 ES6 语法。
唯独,存在如下八个难题:

1、异步加载组件时,会爆发 polyfill 代码冗余
2、不襄助对全局函数与实例方法的 polyfill
八个难点的原故均归因于 babel-plugin-transform-runtime 接纳了沙箱机制来编写翻译大家的代码(即:不修改宿主景况的松手对象)。

  由于异步组件最后会被编写翻译为二个独自的文件,所以尽管七个零部件中应用了同三个新天性(举例:Object.keys()),那么在各样编写翻译后的公文中都会有一份该新特征的 polyfill 拷贝。假使项目非常小可以虚拟不选拔异步加载,可是首屏的压力会比比较大。
  不辅助全局函数(如:Promise、Set、Map),Set 跟 Map 那三种数据结构应该我们用的也非常的少,影响相当小。可是 Promise 影响大概就相当大了。
  不支持实例方法(如:'abc'.include('b')、['1', '2', '3'].find((n) => n < 2) 等等),这些限制大致废掉了相当多字符串和贰分之一左右数组的新特征。

诚如情状下 babel-plugin-transform-runtime 能满意大部分的要求,当不满足须求时,推荐应用完全的 babel-polyfill。

替换 babel-polyfill
首先,从类型中移除 babel-plugin-transform-runtime
  卸载该重视:

npm un babel-plugin-transform-runtime -D

  修改 babel 配置文件

// .babelrc
{
  //...
  "plugins": [
    // - "transform-runtime"
  ]
  //...
}

  然后,安装 babel-polyfill 依赖:

npm i babel-polyfill -D

  最终,在输入文件中程导弹入

// src/main.js
import 'babel-polyfill'

ES6 import 引用难点

  在 ES6 中,模块系统的导入与导出采纳的是引用导出与导入(非轻松数据类型),也正是说,假设在一个模块中定义了三个指标并导出,在任何模块中程导弹入使用时,导入的其实是一个变量援引(指针),倘若改动了指标中的属性,会影响到别的模块的施用。
  经常景况下,系统体量比相当的小时,大家得以采纳JSON.parse(JSON.stringify(str)) 简单阴毒地来生成贰个全新的吃水拷贝的 数据对象。不过当组件相当多、数据对象复用程度较高时,很明朗会生出质量难题,那时大家得以虚拟使用 Immutable.js。

出于那么些原因,进行复杂数据类型的导出时,须要专一八个零件导入同八个多少对象时修改数据后恐怕爆发的难题。其它,模块定义变量或函数时尽管使用 let 并非 const,在导入使用时都会化为只读,无法重复赋值,效果等同用 const 注解。

在 Vue 中使用 Pug 与 Less

设置依赖

  Vue 中利用 vue-loader 依照 lang 属性自动判定所急需的 loader,所以不用额外界署 Loader,可是必要手动安装相关信赖:

npm i pug -D
npm i less-loader -D

要么至好低价的,不用手动修改 webpack 的布署文件加多 loader 就足以应用了

运用 pug 依然 pug-loader?sass 二种语法的 loader 怎样设置?--- 请参谋预管理器 · vue-loader

使用

<!-- xxx.vue -->
<style lang="less">
  .action {
    color: #ddd;
      ul {
        overflow: hidden;
        li {
          float: left;
        }
      }
  }
</style>
<template lang="pug">
  .action(v-if='hasRight')
    ul
      li 编辑
      li 删除
</template>
<script>
  export default {
    data () {
      return {
        hasRight: true
      }
    }
  }
</script>

概念全局函数或变量

  大多时候我们必要定义一些大局函数或变量,来拍卖部分一再的操作(这里拿 AJAX 的充裕管理举个例子表明)。不过在 Vue 中,每七个单文件组件都有三个独自的上下文(this)。平日在十分管理中,须要在视图上享有展现,那一年大家就须求拜访this 对象,不过全局函数的上下文平常是 window,那时候就须求有的非同小可管理了。

回顾严酷型

  最简便的章程正是直接在 window 对象上定义一个大局方法,在组件内接纳的时候用 bind、call 或 apply 来改动上下文。
  定义一个大局十三分管理格局:

// errHandler.js
window.errHandler = function () { // 不能使用箭头函数
  if (err.code && err.code !== 200) {
    this.$store.commit('err', true)
  } else {
    // ...
  }
}

  在输入文件中程导弹入:

// src/main.js
import 'errHandler.js'
  在组件中使用:

// xxx.vue
export default {
  created () {
    this.errHandler = window.errHandler.bind(this)
  },
  method: {
    getXXX () {
      this.$http.get('xxx/xx').then(({ body: result }) => {
        if (result.code === 200) {
          // ...
        } else {
          this.errHandler(result)
        }
      }).catch(this.errHandler)
    }
  }
}

淡乌兰察布全型

  在大型多少人搭档的项目中,污染 window 对象依然不太妥善的。极度是部分相比有个人特色的大局方法(可能在你写的机件中差相当的少到处用到,不过对于其余人来讲或然并没有须要)。那时候推荐写四个模块,更优新余全,也正如自然,独一不足之处就是种种须要使用该函数或方法的零件都亟需开展导入。
  使用方法与前一种完全一样,就十分的少作介绍了。 ̄

自定义路线小名

  也可能有一点点人小心到了,在 vue-cli 生成的模版中在导入组件时采纳了如此的语法:

import Index from '@/components/Index'

  这一个 @ 是何等事物?后来改配置文件的时候发现那一个是 webpack 的布署选项之一:路径别称。
  大家也足以在基础配置文件中加多本身的门道外号,比方上边这么些就把 ~ 设置为路径 src/components 的外号:

// build/webpack.base.js
{
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '~': resolve('src/components')
    }
  }
}

  然后大家导入组件的时候就足以如此写:

// import YourComponent from 'YourComponent'
// import YourComponent from './YourComponent'
// import YourComponent from '../YourComponent'
// import YourComponent from '/src/components/YourComponent'
import YourComponent from '~/YourComponent'

  既消除了路径过长的劳动,又减轻了相对路线的烦心,方便广大吗!

CSS 作用域与模块

零件内样式

  通常,组件中

标签里的样式是大局的,在使用第三方 UI 库(如:Element)时,全局样式很也许影响 UI 库的样式。我们能够透过抬高 scoped 属性来使 style 中的样式只效劳于当下组件:

<style lang="less" scoped>
  @import 'other.less';
  .title {
    font-size: 1.2rem;
  }
</style>

在有 scoped 属性的 style 标签内导入其余样式,同样会受限于成效域,变为组件内样式。复用程度较高的体裁不建议如此使用。另,在组件内样式中应制止采取要素选拔器,原因在于成分选拔器与质量选拔器组合时,品质会大大裁减。--- 三种组成选取器的测验:classes selector,elements selector

导入样式

相对于 style 使用 scoped 属性时的零件内样式,不经常候大家也需求丰裕一些大局样式。当然大家得以用没有scoped 属性的 style 来写全局样式。然则相比较,更推荐上面这种写法:

/* 单独的全局样式文件 */
/* style-global.less */
body {
  font-size: 10px;
}
.title {
  font-size: 1.4rem;
  font-weight: bolder;
}

  然后在输入文件中程导弹入全局样式:

// src/main.js
import 'style-global.less'

www.3868.com,获得表单控件值

  平常大家能够直接使用 v-model 将表单控件与数码开展绑定,然则有的时候我们也会必要在客商输入的时候取妥帖前值(比方:实时验证当前输入控件内容的卓有功用)。

  这时我们能够利用 @input 或 @change 事件绑定我们自身的管理函数,并传到 $event 对象以获取当前控件的输入值:

<input type='text' @change='change($event)'>

change (e) {
  let curVal = e.target.value
  if (/^d+$/.test(curVal)) {
    this.num = +curVal
  } else {
    console.error('%s is not a number!', curVal)
  }
}

本来,倘使 UI 框架选取 Element 会更简约,它的平地风波回调会直接传入当前值。

v-for 的使用 tips

  v-for 指令很有力,它既可以用来遍历数组、对象,乃至足以遍历一个数字或字符串。

  基本语法就不讲了,这里讲个小 tips:

索引值

  在选择 v-for 遵照目标或数组生成 DOM 时,有的时候候必要知道当前的目录。大家得以这么:

<ul>
  <li v-for='(item, key) in items' :key='key'> {{ key }} - {{ item }}
</ul>

  不过,在遍历数字的时候须求介怀,数字的 value 是从 1 初阶,而 key 是从 0 开头:

<ul>
  <li v-for='(v, k) in 3' :key='k'> {{ k }}-{{ v }} 
  <!-- output to be 0-1, 1-2, 2-3 -->
</ul>

2.2.0+ 的本子里,当在组件中动用 v-for 时,key 以往是必需的。

模板的独步天下根节点

  与 JSX 同样,组件中的模板只能有一个根节点,即上面这种写法是 错误 的:

<template>
  <h1>Title</h1>
  <article>Balabala...</article>
</template>

  大家需求用一个块级成分把他包裹起来:

<template>
  <div>
    <h1>Title</h1>
    <article>Balabala...</article>
  </div>
</template>

缘由仿照效法:React-小记:组件开拓注意事项#独一根节点

品类路线配置

  由于 vue-cli 配置的品种提供了三个放权的静态服务器,在开拓阶段基本不会有啥样难点。不过,当大家把代码放到服务器上时,平日会遇到静态财富援用错误,导致分界面一片空白的标题。

  那是由于 vue-cli 暗中认可配置的 webpack 是以站点根目录援引的公文,但是不经常我们大概要求把品种布置到子目录中。

  大家能够通过 config/index.js 来修改文件引用的相对路线:

  build.assetsSubDirectory: 'static'
  build.assetsPublicPath: '/'

  dev.assetsSubDirectory: 'static'
  dev.assetsPublicPath: '/'

  我们得以看来导出对象中 build 与 dev 均有 assetsSubDirectory、assetsPublicPath 那七个属性。

  个中 assetsSubDirectory 指静态能源文件夹,也正是包装后的 js、css、图片等文件所放置的文本夹,这一个默许平常不会极度。

  assetsPublicPath 指静态能源的援用路线,暗中同意配置为 /,即网址根目录,与 assetsSubDirectory 组合起来就是总体的静态资源引用路线 /static。

  写到这里化解措施已经很分明了,只要把根目录改为相对目录就好了:

  build.assetsSubDirectory: 'static'
  build.assetsPublicPath: './'

  没有错!正是叁个 . 的标题。
小说还在健全中,招待大家一齐商讨 Vue.JS 开荒中碰到的有的难点哈 /
话说收藏众多,你规定收藏了会记得看呢_
读一读开辟的时候最少会有个印象,点个赞打卡啦~
初稿:VueJS 开垦常见难点总结
https://blog.beard.ink/JavaScript/VueJS-开垦常见难题归结/

TAG标签:
版权声明:本文由银河国际点击登录发布于www.3868.com,转载请注明出处:开发常见问题集锦