Comment implémenter une conception de page de type titre dans Vue ?

Vue est une bibliothèque JavaScript progressive basée sur un framework qui facilite la création d'applications complexes d'une seule page. Dans le développement Web, la conception de pages de type titre est devenue une tendance courante car elle peut offrir une meilleure expérience utilisateur et permettre aux utilisateurs de parcourir et de trouver plus facilement du contenu intéressant.

Cet article expliquera comment utiliser le framework Vue pour implémenter une conception de page de type Toutiao, y compris la conception de la page d'accueil, de la page de contenu et de la page de recherche. Tout d'abord, nous devons installer Vue CLI, qui est un outil de ligne de commande officiellement fourni par Vue pour créer rapidement des applications Vue. La méthode spécifique est la suivante :

1. Installez Node.js et npm.

Si vous n'avez pas installé Node.js et npm, vous pouvez les télécharger et les installer depuis le site officiel de Node.js.

2. Installez Vue CLI.

Vous pouvez installer Vue CLI globalement à l'aide de la commande suivante :

npm install -g @vue/cli

3. Créer un projet.

Vous pouvez utiliser la commande suivante pour créer un nouveau projet Vue :

vue create my-project

où, my-project est le nom du projet. Lors de la création d'un projet, vous pouvez choisir d'utiliser les paramètres par défaut ou de configurer manuellement certaines options.

Maintenant, commençons à mettre en œuvre la conception de page qui imite Toutiao.

1. Conception de la page d'accueil

Tout d'abord, nous devons créer une page d'accueil, qui doit avoir un en-tête, une barre de navigation, une liste de contenu et un pied de page. En utilisant Vue, nous pouvons facilement créer cette page.

La partie head peut être implémentée à l'aide de composants, le code est le suivant :

<template>
  <div class="header">
    <div class="logo">
      <img src="./assets/logo.png" alt="logo">
    </div>
    <div class="title">TODAY</div>
    <div class="search">
      <input type="text">
      <button>搜索</button>
    </div>
  </div>
</template>

La partie barre de navigation comprend plusieurs onglets, nous pouvons utiliser Vue Router pour l'implémenter. Lors de la création du projet dans Vue CLI, nous avons déjà installé Vue Router et n'avons besoin que de configurer le routage dans App.vue. Le code est le suivant :

<template>
  <div>
    <router-link to="/">主页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-link to="/video">视频</router-link>
    <router-link to="/my">我的</router-link>
    <router-link to="/publish">发布</router-link>
    <router-view></router-view>
  </div>
</template>

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

La section liste de contenu comprend plusieurs articles. Nous pouvons utiliser Vue pour rendre dynamiquement ces articles et ajouter des effets de transition pour améliorer l'expérience utilisateur. Le code est le suivant :

<template>
  <div class="article-list">
    <transition-group name="fade">
      <div class="article" v-for="article in articles" :key="article.id">
        <div class="image">
          <img :src="article.image" alt="article-image">
        </div>
        <div class="title">{{ article.title }}</div>
        <div class="summary">{{ article.summary }}</div>
        <div class="info">
          <div class="time">{{ article.time }}</div>
          <div class="source">{{ article.source }}</div>
          <div class="comment">{{ article.comment }}评论</div>
          <div class="like">{{ article.like }}赞</div>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  data() {
    return {
      articles: [
        {
          id: 1,
          image: './assets/article1.jpg',
          title: '文章标题1',
          summary: '文章摘要1',
          time: '10分钟前',
          source: '文章来源1',
          comment: 100,
          like: 200,
        },
        {
          id: 2,
          image: './assets/article2.jpg',
          title: '文章标题2',
          summary: '文章摘要2',
          time: '20分钟前',
          source: '文章来源2',
          comment: 150,
          like: 250,
        },
        // 可以添加更多的文章
      ],
    };
  },
};
</script>

<style scoped>
/* 添加一些过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

La partie queue comprend des liens communs et des icônes de réseaux sociaux, le code est le suivant :

<template>
  <div class="footer">
    <div class="link">
      <a href="#">关于我们</a>
      <a href="#">联系我们</a>
      <a href="#">隐私政策</a>
      <a href="#">版权声明</a>
      <a href="#">广告服务</a>
      <a href="#">招聘信息</a>
    </div>
    <div class="social">
      <p>关注我们：</p>
      <div class="icon">
        <a href="#"><i class="fab fa-weibo"></i></a>
        <a href="#"><i class="fab fa-weixin"></i></a>
        <a href="#"><i class="fab fa-qq"></i></a>
        <a href="#"><i class="fab fa-douban"></i></a>
        <a href="#"><i class="fab fa-linkedin-in"></i></a>
        <a href="#"><i class="fab fa-github"></i></a>
      </div>
    </div>
  </div>
</template>

2. Conception de la page de contenu

La page de contenu doit inclure les détails de l'article, les articles connexes et commentaires. Nous pouvons utiliser Vue Router pour implémenter des sauts et transmettre des paramètres. Le code est le suivant :

<template>
  <div class="article-page">
    <div class="article-header">
      <div class="title">{{ article.title }}</div>
      <div class="info">
        <div class="time">{{ article.time }}</div>
        <div class="source">{{ article.source }}</div>
        <div class="comment">{{ article.comment }}评论</div>
        <div class="like">{{ article.like }}赞</div>
      </div>
    </div>
    <div class="article-body">
      <div class="image">
        <img :src="article.image" alt="article-image">
      </div>
      <div class="content">
        {{ article.content }}
      </div>
    </div>
    <div class="article-footer">
      <div class="related-articles">
        <div class="title">相关文章</div>
        <div class="list">
          <div class="related-article" v-for="relatedArticle in relatedArticles" :key="relatedArticle.id">
            <div class="image">
              <img :src="relatedArticle.image" alt="article-image">
            </div>
            <div class="title">{{ relatedArticle.title }}</div>
          </div>
        </div>
      </div>
      <div class="comments">
        <div class="title">用户评论</div>
        <div class="list">
          <div class="comment" v-for="comment in comments" :key="comment.id">
            <div class="avatar">
              <img :src="comment.avatar" alt="user-avatar">
            </div>
            <div class="content">
              <div class="name">{{ comment.name }}</div>
              <div class="time">{{ comment.time }}</div>
              <div class="text">{{ comment.text }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticlePage',
  data() {
    return {
      article: {
        id: 1,
        image: './assets/article1.jpg',
        title: '文章标题1',
        content: '文章内容1',
        time: '10分钟前',
        source: '文章来源1',
        comment: 100,
        like: 200,
      },
      relatedArticles: [
        {
          id: 2,
          image: './assets/article2.jpg',
          title: '文章标题2',
        },
        {
          id: 3,
          image: './assets/article3.jpg',
          title: '文章标题3',
        },
        // 可以添加更多的相关文章
      ],
      comments: [
        {
          id: 1,
          avatar: './assets/avatar1.jpg',
          name: '用户1',
          time: '1小时前',
          text: '评论内容1',
        },
        {
          id: 2,
          avatar: './assets/avatar2.jpg',
          name: '用户2',
          time: '2小时前',
          text: '评论内容2',
        },
        // 可以添加更多的评论
      ],
    };
  },
};
</script>

3. Conception de la page de recherche

La page de recherche doit inclure un champ de recherche, un bouton de recherche et des résultats de recherche. Nous pouvons utiliser Vue pour afficher dynamiquement les résultats de recherche. Le code est le suivant :

<template>
  <div class="search-page">
    <div class="search-box">
      <input type="text" v-model="query" placeholder="输入搜索内容">
      <button @click="search">搜索</button>
    </div>
    <div class="search-result">
      <div class="title">搜索结果</div>
      <div class="list">
        <div class="result" v-for="result in results" :key="result.id">
          <div class="image">
            <img :src="result.image" alt="article-image">
          </div>
          <div class="title">{{ result.title }}</div>
          <div class="source">{{ result.source }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchPage',
  data() {
    return {
      query: '',
      results: [],
    };
  },
  methods: {
    search() {
      // 模拟搜索结果
      this.results = [
        {
          id: 1,
          image: './assets/article1.jpg',
          title: '搜索结果1',
          source: '文章来源1',
        },
        {
          id: 2,
          image: './assets/article2.jpg',
          title: '搜索结果2',
          source: '文章来源2',
        },
        // 可以添加更多的搜索结果
      ];
    },
  },
};
</script>

Jusqu'à présent, nous avons implémenté une conception de page de type titre. Grâce au framework Vue, vous pouvez implémenter rapidement et facilement des conceptions de pages complexes, améliorant ainsi l'efficacité du développement et l'expérience utilisateur. J'espère que cet article pourra vous aider à mieux comprendre le framework Vue et ses applications.

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!