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

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.

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

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

npm i element-ui -S

2. Introduisez Element-UI

Tout d'abord, ouvrez src/main. js, 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);

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

3. 创建布局组件

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

Sidebar.vue 示例代码：

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

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

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

Footer.vue 示例代码：

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

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

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

Main.vue 示例代码：

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

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

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

4. 创建主页组件

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

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

5. 修改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>

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

6. 运行项目

在命令行工具中执行以下命令，启动开发服务器：

npm run serve

然后在浏览器中打开 http://localhost:8080rrreee

De cette façon, nous avons introduit avec succès Element-UI.

Créez un composant de mise en page
🎜Créez un nouveau dossier layout dans le répertoire src/views, puis dans layout Créez <code>Header.vue, Sidebar.vue, Footer.vue et Main.vue dans le répertoire quatre fichiers. 🎜🎜Header.vue Exemple de code : 🎜rrreee🎜Sidebar.vue Exemple de code : 🎜rrreee🎜Footer.vue Exemple de code : 🎜rrreee🎜Main.vue Exemple de code : 🎜rrreee
🎜Créer un composant de page d'accueil🎜 🎜🎜Créez un nouveau fichier Home.vue dans le répertoire src/views. L'exemple de code est le suivant : 🎜rrreee🎜Dans le composant de la page d'accueil, nous avons introduit les quatre. Composants de mise en page créés précédemment et utilisez la mise en page Flex pour implémenter la structure de base de la page. 🎜
🎜Modifier App.vue🎜🎜🎜Ouvrez le fichier src/App.vue, effacez son contenu, puis ajoutez le code suivant : 🎜rrreee🎜Dans l'application composant, nous avons introduit et utilisé le composant Home comme composant d’entrée. 🎜
🎜Exécutez le projet🎜🎜🎜Exécutez la commande suivante dans l'outil de ligne de commande pour démarrer le serveur de développement : 🎜rrreee🎜Puis ouvrez http://localhost:8080dans le navigateur >, vous pouvez voir la présentation du site Web du portail. 🎜🎜Grâce aux étapes ci-dessus, nous avons réussi à mettre en œuvre une conception de présentation de portail simple à l'aide de Vue et Element-UI. Vous pouvez ajuster et étendre davantage cette disposition en fonction des besoins réels. En utilisant les riches composants fournis par Element-UI, vous pouvez facilement ajouter du contenu et des styles pour créer un portail plus riche et plus diversifié. 🎜🎜J'espère que cet article pourra être utile pour utiliser Vue et Element-UI pour implémenter la conception de la mise en page du site Web du portail. Je vous souhaite du succès dans le processus de développement ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!