Comment utiliser Vue et Element-UI pour implémenter la conception de mise en page du site Web du portail-Voir.js-php.cn

Comment utiliser Vue et Element-UI pour implémenter la conception de mise en page du site Web du portail

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Libérer： 2023-07-21 19:25:46

original

3124 Les gens l'ont consulté

Comment utiliser Vue et Element-UI pour mettre en œuvre la conception de la mise en page d'un site Web portail

À l'ère numérique d'aujourd'hui, le site Web portail est l'une des plates-formes importantes permettant aux entreprises ou aux organisations d'afficher des informations, de fournir des services et d'interagir avec les utilisateurs, et sa conception de mise en page est particulièrement importante. En tant que framework frontal populaire, Vue.js, combiné à la bibliothèque de composants d'interface utilisateur Element-UI, peut rapidement créer un site Web de portail moderne et esthétique. Cet article expliquera comment utiliser Vue et Element-UI pour implémenter la conception de la mise en page du site Web du portail et joindra des exemples de code.

Installez Vue et Element-UI

Tout d'abord, assurez-vous que Node.js et npm (ou fil) sont installés. Ouvrez l'outil de ligne de commande et exécutez la commande suivante pour créer un projet Vue :

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

Copier après la connexion

Ensuite, installez la bibliothèque de composants Element-UI :

npm i element-ui -S

Copier après la connexion

Introduisez Element-UI

Tout d'abord, ouvrez src/main. js< /code>, ajoutez le code suivant : <code>src/main.js 文件，添加下面的代码：

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

Vue.use(ElementUI);

Copier après la connexion

这样，我们就成功引入了Element-UI。

创建布局组件

在 src/views 目录下创建一个新的文件夹 layout，然后在 layout 目录中创建 Header.vue、Sidebar.vue、Footer.vue 和 Main.vue 四个文件。

Header.vue 示例代码：

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

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

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

Copier après la connexion

Sidebar.vue 示例代码：

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

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

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

Copier après la connexion

Footer.vue 示例代码：

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

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

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

Copier après la connexion

Main.vue 示例代码：

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

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

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

Copier après la connexion

创建主页组件

在 src/views 目录下创建一个新文件 Home.vue，示例代码如下：

<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>

Copier après la connexion

在主页组件中，我们引入了之前所创建的四个布局组件，并使用Flex布局来实现页面的基本结构。

修改App.vue

打开 src/App.vue 文件，清空其中的内容，然后添加以下代码：

<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>

Copier après la connexion

在App组件中，我们引入并使用了Home组件作为入口组件。