只是实际支出中会遇见的题目。但是实际上付出中会赶上的问题。

由于店铺之前端开始倒车
VueJS,最近起来以此框架进行开,遇到一些题目记录下来,以统后用。
重大描写有 官方手册
上没写,但是事实上支出中会遇到的问题,需要一定知识基础。

是因为企业的前端开始转向
VueJS,最近开班用是框架进行支付,遇到有些题材记录下来,以统后用。
最主要描写有 官方手册
上从来不写,但是事实上开支被见面遇上的题目,需要一定文化底子。

关联技术栈

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

关系技术栈

  • 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'

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 声明。

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>

在 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
对象还是勿极端妥当之。特别是局部比起个体特点之大局方法(可能于你写的组件中几乎处处以,但是于其他人来说恐怕并不需要)。这时候推荐写一个模块,更优雅安全,也正如自然,唯一不足之处就是每个需要采用该函数或方式的零部件都亟需进行导入。
  使用方式与前面一模一样栽大同小异,就无多作介绍了。 ̄

概念全局函数或变量

  许多时光我们需要定义有大局函数或变量,来处理局部频之操作(这里拿
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'

  既化解了路线过长的分神,又缓解了相对路径的愤懑,方便多咔嚓!

打定义路径别名

  可能稍人瞩目到了,在 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'

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'

赢得表单控件值

  通常咱们可直接运用 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-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 现在是得的。

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-小记:组件开发注意事项#唯一彻底节点

模板的绝无仅有彻底节点

  同 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-开发大问题概括/

种路线配置

  由于 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-开发常见问题集锦/