How to use Vue and Element-UI to implement the layout design of the portal website

How to use Vue and Element-UI to implement the layout design of the portal website

In today's digital era, the portal website is one of the important platforms for enterprises or organizations to display information, provide services, and interact with users. Its layout Design is particularly important. As a popular front-end framework, Vue.js, combined with the UI component library Element-UI, can quickly build a modern and beautiful portal website. This article will introduce how to use Vue and Element-UI to implement the layout design of the portal website, and attach code examples.

1. Install Vue and Element-UI

First, make sure Node.js and npm (or yarn) are installed. Open the command line tool and execute the following command to create a Vue project:

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

Next, install the Element-UI component library:

npm i element-ui -S

2. Introduce Element-UI

First, open the src/main.js file and add the following code:

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

Vue.use(ElementUI);

In this way, we have successfully introduced Element-UI.

3. Create layout component

Create a new folder layout in the src/views directory, and then # Create four Header.vue, Sidebar.vue, Footer.vue and Main.vue in the ##layout directory. document.

Header.vue sample code:

<template>
  <div class="header">
    <!-- 在这里放置头部的内容 -->
  </div>
</template>

<script>
export default {
  name: 'Header',
}
</script>

<style scoped>
.header {
  height: 60px;
  background-color: #f0f0f0;
}
</style>

Sidebar.vue sample code:

<template>
  <div class="sidebar">
    <!-- 在这里放置侧边栏的内容 -->
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
}
</script>

<style scoped>
.sidebar {
  width: 200px;
  background-color: #f0f0f0;
}
</style>

Footer.vue sample code:

<template>
  <div class="footer">
    <!-- 在这里放置底部的内容 -->
  </div>
</template>

<script>
export default {
  name: 'Footer',
}
</script>

<style scoped>
.footer {
  height: 60px;
  background-color: #f0f0f0;
}
</style>

Main.vue sample code ：

<template>
  <div class="main">
    <!-- 在这里放置主要内容区域的内容 -->
  </div>
</template>

<script>
export default {
  name: 'Main',
}
</script>

<style scoped>
.main {
  flex: 1;
  background-color: #fff;
}
</style>

Create home page component

Create a new file

Home.vue in the src/views directory, example The code is as follows:

<template>
  <div class="home">
    <Header />
    <div class="content">
      <Sidebar />
      <Main />
    </div>
    <Footer />
  </div>
</template>

<script>
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
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  display: flex;
  overflow: hidden;
}
</style>

In the home page component, we introduced the four layout components we created before and used Flex layout to implement the basic structure of the page.

Modify App.vue

Open the

src/App.vue file, clear its contents, and then add the following code:

<template>
  <div id="app">
    <Home />
  </div>
</template>

<script>
import Home from './views/Home.vue';

export default {
  name: 'App',
  components: {
    Home
  }
}
</script>

<style>
#app {
  margin: 0 auto;
  max-width: 1200px;
}
</style>

In the App component, we introduced and used the Home component as the entry component.

Run the project

Execute the following command in the command line tool to start the development server:

npm run serve

Then open

http in the browser ://localhost:8080, you can see the layout of the portal website.

Through the above steps, we successfully implemented a simple portal layout design using Vue and Element-UI. You can further adjust and expand this layout according to actual needs. By using the rich components provided by Element-UI, you can easily add content and styles to create a richer and more diverse portal.

I hope this article can be helpful to use Vue and Element-UI to implement the layout design of the portal website. I wish you success in the development process!

The above is the detailed content of How to use Vue and Element-UI to implement the layout design of the portal website. For more information, please follow other related articles on the PHP Chinese website!