安装Vue和Element-plus

要用好弹性布局和响应设计，先把Vue和Element-Plus这俩小助手啃下来。有了这两个你就能随心所欲地ballet创意了!

全局注册Element-plus组件

# 安装Vue CLI
npm install -g @vue/cli
# 创建一个新的Vue项目
vue create flex-layout
# 进入项目目录
cd flex-layout
# 安装Element-plus
npm install element-plus

敲黑板注意！先得把Vue和Element-plus装进main.js。然后别忘了给每一块Element-plus组件做个全身检查——全域注册，否则辛辛苦苦写的代码就不灵咯~

编写弹性布局代码

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
createApp(App).use(ElementPlus).mount('#app')

App.vue才是真正开始规划侧边栏和主体内容的时候。先简单布局下网格，el-row和el-col轻松搞定。为了侧边栏好看，记得分4排；至于主体内容这部分，给它留出20行~

添加侧边栏和主内容

  

    
      
        
      
      
        
      
    
  


.container {
  margin: 20px;
}

快搞个小侧边栏，方便翻页看文章，看着也舒心些。记得要先登录，才能复制

实现自适应效果

现在无论用啥设备上网，都超级方便！喜欢怎么调整就怎么调整侧边栏和主界面的大小和位置，看着舒服，用着也顺手，太给力了！

  
    
      菜单项1
      菜单项2
      菜单项3
    
  
  

利用Element-plus组件

别小瞧这个功能，实际上很多都会的东西在里面！比如，Element-plus这玩意儿，它有各种各样的造型和组建，很简单，学会了就能让你的网页变得超炫酷的。随心所欲地搞，弹窗布局、响应设计这些小菜一碟！

  
    
欢迎来到我的博客
    
这是我的第一篇文章。
    
感谢您的阅读！
  

总结

用Vue搞定，用点Element-Plus，轻松搞定弹性布局和响应式设计，让你的网站或app跑起来更溜，用户体验更佳哟～赶紧去看看这篇文章，满是惊喜。