前提:完成这一操作需要先完成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中使用组件
看一下运行效果
下期学习精选页面布局