- 创建项目
vue init webpack tabbar
- 创建css文件 公共的
- 导入css文件
@import 路径没提示解决办法
"@": "${workspaceRoot}/src"
创建jsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": { "@/*": ["src/*"] }
},
"exclude": ["node_modules"]
}
在App.vue里导入css文件
- 在组件文件夹下创建tabbar文件夹，在tabbar文件夹下创建TabBar.vue 和TabBarItem.vue TabBar是整个标签栏 item 是里面的一个一个的小组件
在assets文件夹下创建img文件夹，里面放图标
-
在App.vue里注册TabBar和TabBarItem 得先导入
然后在使用<tab-bar>标签时用-分割大写 在tab-bar-item 里 使用插槽 slot
分成图标和文字两类 item-icon item-text -
在TabBar.vue里使用slot 主要是样式写在这里
-
在TabBarItem.vue里使用slot 使用具名插槽
这样封装独立组件的好处就是 下次要插入图标还是修改文字都可以直接在App.vue上改
- 点击图标会变色 那么得再创建插槽
- 得让他只显示一种 加个判断 v-if
如果不活跃 就使用item-icon
否则使用item-icon-active
在计算属性里也是方法
返回的是当前活跃的路由 $route
indexOf 是比较当前活跃路由的路径和当前路径 不等于-1 相当于 true 也就是一样， 如果不写不等于-1 会导致点哪个哪个不亮 其他亮
文字也要跟着变 如果只在slot 里 绑定
即<slot :class="{active:isActive} name="item-text"></slot>
不行，因为 会被<div slot="item-text">首页</div>这一句话替换 这样就没有这个类了
所以可以在外层加个div 这样里面替换成div了也不影响这个类
但是这个颜色固定了 别人想改不好改 为了让代码复用率高 还是写个方法 动态绑定
- 安装路由
npm install vue-router --save
- 创建router文件夹、index.js
- 在index里导入vue、vue-router
- Vue.use(VueRouter)
- 创建routes=[]
- 创建router 里面放routes
- 导出router
- main.js里导入router 实例里加router
- 创建views视图，同时分别创建首页、分类、购物车、我的相对应的文件夹，以及.vue文件
const Home = () => import('../views/home/Home.vue')
- 给item绑定点击事件
在methods里写这个方法
用replace不让返回页面 参数为path
这个path 用父传子 props
回到父组件 App.vue
ps: 加上.catch(err=>err) 可以解决NavigationDuplicated: Avoided redundant navigation to current location: 这个问题
其他答案试过好像没用 不如这个还简单哈哈
path直接写字符串 如果加上冒号 后面跟的是父组件数据?
别忘了加上router-view
但是App.vue里代码还是很多，还是需要抽取出来一点，所以创建MainTabBar 来放 tab-bar
把App.vue里的 tab-bar 剪切过来 图片路径稍微改一下 ，script 里的也搬过来，然后App.vue里导入MainTabBar 同时使用这个组件
这时候就会发现 一个组件树
回顾
- runtime-compiler 和 runtime-only区别
- ESLint 有很多格式
- template->ast->render->vdom->真实dom
- render:h = > h(App)
- CLI3创建项目
- CLI3目录结构
- 配置文件：Vue UI 、 隐藏的配置文件 自定义vue.config.js
- 前端路由：后端渲染\后端路由、前后端分离、SPA
- 路由基本配置
- 安装vue-router、Vue.use、创建VueRouter对象、挂载到vue实例上、配置映射关系：创建组件 配置映射关系 使用router-link、 router-view
- 细节处理 默认路由redirect 、 mode：history、router-link->tag\replace\active-class
- 动态路由：/user/:id this.$route.params.id
- 参数传递 params 、query、URL（scheme://host:port/path?query#fragment）
- 路由嵌套 children:[]
- 导航守卫：全局、路由独享、组件内守卫
- keep-alive
- TabBar的封装