前提：完成这一操作需要先完成http://t.csdn.cn/oiqIT中的操作

一、清理系统自带文件

找到App.vue文件删除

再删除路由router中index.js中Hello World.vue的引用

 只保留中括号

继续删除views中的两个内容。 

 再删除Hello Word.vue

最后再删assets中的logo 

再将下载好的资源放到assets中 （资源在vue网页图片以及名称-Node.js文档类资源-CSDN下载和vue前段开发网页图片及名称-Node.js文档类资源-CSDN下载中下载）两个都要下载

​​​​​​​

 找到main.js在其中写入import '@/assets/reset.css'

 下载安装组件2https://youzan.github.io/vant/v2/#/zh-CN/点击快速上手复制Vant

在main.js中引用vant组件

 查看package.json文件看到vant组件的版本号表示安装成功。mac如果安装不成功的话建议改为国内安装cnpm

打开导航栏Tabbar标签栏

 在componrnts中创建Tab bar.vue

在main.js中引入confront.js

目前报错不用管

在Tabbar.vue中引用vant-Tabbar组件 

在Tabbar.vue中声明

在App.vue中引入组件

运行项目npm run serve

在Tabbar.vue中把分类购物车我的写入

 导入组件至main.js

在Tabbar.vue中添加

添加动态，在tabbar.vue中

tabs:[

    {

      name:'精选',

      icon:'compass-full'

    },

    {

      name:'分类',

      icon:'class-full'

    },

    {

      name:'购物车',

      icon:'cart-full'

    },

    {

      name:'我的',

      icon:'wode'

    }

]

一定要手敲千万不要复制​​​​​​​

删除

在Tabbar.vue中添加导航栏页面动态

在views文件夹下分别创建我的User.vue购物车Cart.vue分类Category.vue精选Home.vue并在其中输入 

添加路由在router文件夹下index.js中 

 在router文件夹下index.js中写入共四个页面

四个页面按顺序往下写：

 添加路由视图容器（窗口）在App.vue中

在Tabbar.vue中添加route 

在Tab bar.vue中添加 

在data（）中添加四个

 在App.vue中使用组件

看一下运行效果

下期学习精选页面布局