Vue 开发必须知道的36个技巧(小结)

transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}

// 配置文件,如果是vue-cli2.x 在vue-loader.conf.js里面修改
avatar: ['default-src']

// vue-cli 3.x 在vue.config.js
{
vue: {
transformToRequire: {
avatar: ['default-src'] }
}
}

// page 代码可以简化为
<template>
<div>
<avatar img-src="./assets/default-avatar.png"></avatar>
</div>
</template>

34.为路径设置别名

1.场景:在开发过程中，我们经常需要引入各种文件，如图片、CSS、JS等，为了避免写很长的相对路径（../），我们可以为不同的目录配置一个别名

2.vue-cli 2.x 配置

// vue-cli 2.x在vue-loader.conf.js 默认配置是
transformToRequire: {
 video: ['src', 'poster'],
 source: 'src',
 img: 'src',
 image: 'xlink:href'
}
// 配置文件,如果是vue-cli2.x 在vue-loader.conf.js里面修改
 avatar: ['default-src']
// vue-cli 3.x 在vue.config.js
{
 vue: {
 transformToRequire: {
  avatar: ['default-src'] }
 }
}
// page 代码可以简化为
<template>
 <div>
 <avatar img-src="./assets/default-avatar.png"></avatar>
 </div>
</template>

3.vue-cli 3.x 配置

// 在根目录下创建vue.config.js
var path = require('path')
function resolve (dir) {
 console.log(__dirname)
 return path.join(__dirname, dir)
}
module.exports = {
 chainWebpack: config => {
 config.resolve.alias
  .set(key, value) // key,value自行定义，比如.set('@@', resolve('src/components'))
 }
}

35.img 加载失败

场景:有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片

// page 代码
<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{
 data(){
  return{
   imgUrl:''
  }
 },
 methods:{
  handleError(e){
   e.target.src=reqiure('图片路径') //当然如果项目配置了transformToRequire,参考上面 27.2
  }
 }
}
</script>

36.css

36.1 局部样式

1.Vue中style标签的scoped属性表示它的样式只作用于当前模块，是样式私有化.

2.渲染的规则/原理：

给HTML的DOM节点添加一个 不重复的data属性 来表示 唯一性

在对应的 CSS选择器 末尾添加一个当前组件的 data属性选择器来私有化样式，如：.demo[data-v-2311c06a]{}
如果引入 less 或 sass 只会在最后一个元素上设置