安裝：

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樣式，鉤子函數(shù)中修改

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

?

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

?比如一個新聞滾動的列表項。如果在這里需要操作dom, 應該是等待 Vue 完成更新 DOM之后。

this.nextTick(callback)，當數(shù)據(jù)發(fā)生變化，更新后執(zhí)行回調(diào)。

this.$nextTick(callback)，當dom發(fā)生變化，更新后執(zhí)行的回調(diào)。

?

5、vue項目里，img標簽報錯，添加默認圖片

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

轉載于:https://www.cnblogs.com/ckmouse/p/11003357.html

總結

以上是生活随笔為你收集整理的vue-cli 3.0的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。