安装：

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标签报错，添加默认图片

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