vue首页页面呈现

太过爱你忘了你带给我的痛 2022-05-08 20:25 328阅读 0赞

main.js是加载路由的文件

第一步

新建一个views页面,定义一个GoodsList.vue组件,在template里写入代码,然后在script里引入import引入要加载的css文件

  1. 例如这样     <script> import './../assets/css/base.css'

然后在router里的index.js里定义路由:,首先要引入GoodList.vue页面,然后分配路由

  1. routes: [
  2.   {
  3.     path:'/',//这个path里的/代表首页路径
  4.     name:'GoodsList',
  5.     component:GoodsList
  6.   }
  7. ]

然后要把这个GoodList.vue进行拆分成各个组件.

重新在src目录下新建一个components目录,新建一个Navheader.vue,在插件里引入header区代码,然后在GoodList.vue页面引入这个header插件格式这么写,在script里会自动import NavHeader 像这样import NavHeader from ‘@/components/NavHeader’,并且自动添加components,像这样

  1. export default {
  2.   components: {
  3.    NavHeader
  4.   },

查看页面是否正常.

面包屑页面,也是如此,但是要注意slot插槽的用法,在面包屑插件里,定义一个

  1. <slot name="bread"></slot>

然后在GoodList.vue里这么用

  1. <nav-bread>
  2.   <span slot="bread">Goods</span>
  3.   <!--<span slot="b">ceshi</span>-->
  4. </nav-bread>

Goods就可以渲染到页面里了.

发表评论

表情：
评论列表 （有 0 条评论，328人围观）

还没有评论，来说两句吧...

相关阅读

    相关 京东首页之页面分析

    京东首页效果图： ![Center][] 当面对一张设计师给出的网页效果时，我们切不可急忙着手去敲代码实现相应的效果。这样做可能在后续工作中会让我们因当初的考虑不周而

    亦凉亦凉/ 0 赞/ 1830 阅读