商品列表的开发

商品列表组件化开发

header组件

footer组件

面包屑组件

如图所示，是四种创建Vue的实例

---

我们在

第一章开篇已经介绍了项目的搭建了现在，我们简单的介绍一下项目目录

---

如图所示assets和static放的都是静态的资源，一般组件的样式图片什么的都放在assets文件夹里面，static放的是页面要用到的资源，组件和页面的文件，component放的是组件的文件，view放的页面的文件。assets文件会生成base64位，static只是src的路径引入文件

定义路由

首先第一步安装路由npm i vue-router --save

或者在你使用vue-cli脚手架工具的时候就已经安装了vue-router直接使用就可以了

第一步 在src文件下定义router文件夹，作为路由跳转的文件的存储，这里我们建立index.js

index.js

说明：文件中要引入vue和vue-router

使用Vue.use(Router)

创建router实例

在直接导出有两种写法

第一种

export default new Router({

routes:[

{

path:'/',

component:GoodsList

}

]

})

第二种写法

生成一个变量将其进行封装

const routes=[

path:'/',

component:'GoodsList'

]

var router=new Router({

routes

})

export default router

---

最后一步在main.js中注入路由就可以了

也可以写成router：router

---

直接在App.VUE里面设置<router-view></router-view>就可以了