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') + '"'
  }
}
posted @   青春无敌小宇宙  阅读(135)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示