tabbar 首页/分类/购物车/我的组件开发

最新推荐文章于 2023-05-09 19:00:50 发布

Rashu99

最新推荐文章于 2023-05-09 19:00:50 发布

阅读量1.2k

点赞数 1

分类专栏： vue2

本文链接：https://blog.csdn.net/Rashu99/article/details/114575578

版权

本文详细介绍了如何使用Vue.js开发一个包含首页、分类、购物车、我的四个选项的TabBar组件。从创建项目、编写CSS，到组件的封装、插槽的使用、路由的安装和视图创建，一步步指导实现可交互的TabBar，并通过动态绑定实现选中状态的改变。此外，还讨论了Vue CLI的目录结构、路由配置以及组件复用的重要性。

摘要由CSDN通过智能技术生成

1. 创建项目

vue init webpack tabbar

2. 创建css文件公共的

在这里插入图片描述

3. 导入css文件

@import 路径没提示解决办法

在这里插入图片描述

"@": "${workspaceRoot}/src"

在这里插入图片描述
创建jsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": { "@/*": ["src/*"] }
  },
  "exclude": ["node_modules"]
}

在App.vue里导入css文件
在这里插入图片描述

4. 在组件文件夹下创建tabbar文件夹，在tabbar文件夹下创建TabBar.vue 和TabBarItem.vue TabBar是整个标签栏 item 是里面的一个一个的小组件

在assets文件夹下创建img文件夹，里面放图标
在这里插入图片描述

5. 在App.vue里注册Tab

最低0.47元/天解锁文章

Rashu99

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tabbar 首页/分类/购物车/我的组件开发

创建项目vue init webpack tabbar创建css文件公共的导入css文件@import 路径没提示解决办法"@": "${workspaceRoot}/src"创建jsconfig.json{ "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": "./.
复制链接

扫一扫