vue-cli 3.0

安装：

npm i @vue/cli -g

搭建项目：

vue create vue-test

 

按需加载element-ui

1、npm i element-ui -S

　　npm install babel-plugin-component -D

2、babel.config.js 文件中设置

module.exports = {
presets: [
'@vue/app',
'@babel/env'
],
plugins: [ // element官方教程
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
}

 

3、vue文件中引用

import { Button } from 'element-ui';

export default {
name: 'home',
components: {
[Button.name]: Button
}
}

 

vue单独页中修改body样式，钩子函数中修改

mounted:function(){
　　document.body.style.background = '#F3F7FF'
}

 

4、在vue中操作DOM--this.$nextTick()

 比如一个新闻滚动的列表项。如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后。

this.nextTick(callback)，当数据发生变化，更新后执行回调。

this.$nextTick(callback)，当dom发生变化，更新后执行的回调。

 

5、vue项目里，img标签报错，添加默认图片

<img src="/logo.png" :onerror="defaultImg">

data() {
  return {
    defaultImg: 'this.src="' + require('../../assets/img/timg.jpg') + '"'
  }
}