vue.js （制作电商网站）知识点总结一待补充

最新推荐文章于 2024-06-29 10:07:00 发布

L人称

最新推荐文章于 2024-06-29 10:07:00 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 商城制作文章标签： vue 电商网站制作

本文链接：https://blog.youkuaiyun.com/A13169643663/article/details/84639466

本文总结了使用Vue.js制作电商网站的关键知识点，包括页面布局、私有样式以及路由配置。页面布局主要由template、style scoped组成，其中style scoped防止样式污染全局。电商网站通常包含header和body两部分。在路由配置中，通过设置path、name和component来实现页面间的跳转和本地访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先丢官网添加链接描述
推荐一个不错的视频教程网站添加链接描述

进入正题
先说vue的页面布局

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
export default {

}

</script>

<style scoped>

</style>

vue页面分为三个部分，template主要写html ，其余两个相信大家都懂。<“style scoped > 中的 scoped 主要是为了使其私有化，及当前样式只属于当下模块，不污染全局。
先说主页

<template>
  <div id="app">
    <el-container>
      <el-header>
        <Header />
      </el-header>
      <el-main>
        <!-- TODO: main.vue -->
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

电商网站中一般顶部是不变的，因此我们对整个架构先进行划分，即header和body。代码