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') + '"'
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥