vue首页页面呈现

main.js是加载路由的文件

第一步

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

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

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

routes: [
  {
    path:'/',//这个path里的/代表首页路径
    name:'GoodsList',
    component:GoodsList
  }
]

 

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

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

export default {
  components: {
   NavHeader
  },

查看页面是否正常.

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

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

然后在GoodList.vue里这么用

<nav-bread>
  <span slot="bread">Goods</span>
  <!--<span slot="b">ceshi</span>-->
</nav-bread>

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