如何使用 Vue 和 Element-UI 实现现代化门户网站布局设计

讲道理，这门面功夫真挺关键的，咱搞前端设计的都明白。Vue.js简单又快，所以人气高得不行。加上Element-UI这家伙，好多现成就的组件都能直接拿来用，真是方便极了。今天，我就来跟大伙说说怎么用这两货搭建个门户网站布局。

安装Vue和Element-UI

搞定编程环境得先装Node.js和npm呀(其实用yarn也可以的)。装好了就能开始敲命令，轻松搭建出全新的Vue项目。很神奇？而且还有vue-cli帮你加速，简直飞起！接着别忘了装上Element-UI，这样就能拥有超多实用组件。

引入Element-UI

npm install -g @vue/cli
vue create portal-website
cd portal-website

只要学会用Element-UI，那就赶紧开始用！在src/main.js里面加点儿简单代码，轻轻松松就能把Element-UI和你的Vue项目紧紧绑定起来。虽然这步骤看着不起眼，但其实它能让你更好地体验到Element-UI组件的强大功能和实用性！

npm i element-ui -S

创建布局组件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

我弄了个门户网站布局，就在’src/views’那个地方干活儿。把页面分成了几个部分，比如Header.vue就负责顶部的事儿，Sidebar.vue就是处理侧面的问题，Footer.vue管脚底，Main.vue就是办主要事情！他们各自处理自己的零碎活儿！

创建主页组件

要说头等事，家门牌网站，当然是主页好看咯。于是，我在src/views里创建了个Home.vue文件，把它搞定了。然后，往这个页面前面扔进去做过的布局组件，用Element-UI那个Flex布局，最后出来的效果真的很漂酿，还能适应各种大小的屏幕～

  

    
  


export default {
  name: 'Header',
}


.header {
  height: 60px;
  background-color: #f0f0f0;
}

修改App.vue

咱们这个App.vue可是咱们整个Vue项目的门面担当！我给它换上了炫酷的Home组件，保证让你一眼就能看到我家门口这块的美景。虽然不复杂，却真的很重要！因为只有程序跑得顺溜了，才能发挥出最大的价值

  

    
  


export default {
  name: 'Sidebar',
}


.sidebar {
  width: 200px;
  background-color: #f0f0f0;
}

启动开发服务器

搞定代码之后，嗨皮地按下启动服务器的指令，不久后我亲手拼凑的门户网站框架就出现在眼前！那个兴奋劲儿简直无法用言语形容！

  

    
  


export default {
  name: 'Footer',
}


.footer {
  height: 60px;
  background-color: #f0f0f0;
}

调整和扩展布局

  

    
  


export default {
  name: 'Main',
}


.main {
  flex: 1;
  background-color: #fff;
}

记住，即使有了高大上的基础设施，网站也要坚持更新和改进！我们用Element-UI这款全能设计软件，保证每个页面都美到极致，让你无比愉快地上网冲浪！

总结与展望

用Vue和Element-UI做网站有点挑战，但它们简单易懂，功能多样。魔高一尺道高一丈，咱有困难也能慢慢克服。感觉现在的科技简直棒极了，以后肯定会越来越牛的！

  

    

    

      
      

    
    


import Header from './layout/Header.vue';
import Sidebar from './layout/Sidebar.vue';
import Main from './layout/Main.vue';
import Footer from './layout/Footer.vue';
export default {
  name: 'Home',
  components: {
    Header,
    Sidebar,
    Main,
    Footer
  }
}


.home {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

咱们聊聊，大家在搞项目时都遇到过啥棘手事儿？后来又是怎么搞定的？大方分享出来让大家学习学习。觉得文章有用就点赞分享出去，让其他人也受益。