Vue系列---【Vue开发笔记】

1.创建项目

2.清空工作

1.删除了src/assets、components、views

2.重置App.vue

2.重置router/index.js
//4.x以上的版本是为vue3用的
npm install vue-router@3.5.3

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

]

const router = new VueRouter({
routes
})

export default router

3.项目搭建

1.reset.css

1.assets/css下创建reset.css文件

2.main.js引入

// 1.引入reset.css
import "./assets/css/reset.css"

2.rem.js

1.assets/js下创建rem.js

2.main.js引入

// 2.rem.js
import "./assets/js/rem"

px to rem

1.安装插件 px to rem ,默认换算是16

2.编辑器左下角—》设置图标—》settings(设置)—》搜索框：px to rem —>看到16，改成100

3.alt+z 实现px转rem rem转px

3.目录划分

-src
-assets 静态资源
-css
-js
-img
-components 公共组件
-filters 过滤器
-pages 路由组件
-home home页面
home.vue路由组件
-components 拼接home的组件们
banner.vue
list.vue
-request 请求
-router 路由
index.js 路由
App.vue 根组件
main.js 入口文件

4.一级路由

1.创建一堆相关组件

login 登录
index 大首页
movie 电影
movieDetail 电影详情
food 外卖
foodDetail 外卖详情

2.配置规则[src/router/index.js]

// 引入相关组件
import login from "../pages/login/login.vue"
import index from "../pages/index/index.vue"
import movie from "../pages/movie/movie.vue"
import movieDetail from "../pages/movieDetail/movieDetail.vue"
import food from "../pages/food/food.vue"
import foodDetail from "../pages/foodDetail/foodDetail.vue"
const routes = [
{
path:"/login",
component:login
},
{
path:"/index",
component:index
},
{
path:"/movie",
component:movie
},
{
path:"/movieDetail",
component:movieDetail
},
{
path:"/food",
name:food,
component:()=>import('../components/food.vue')
},
{
path:"/foodDetail",
component:foodDetail
},
{
path:"*",
redirect: "/login"
}
]

3.路由出口 [ src/App.vue]

5.路由跳转|路由导航

1.router-link直接跳转

前往大首页

2.编程式导航

this.\(router.push(path) //添加了一条新的历史记录 this.\)router.replace(path) //用新的记录替换当前历史记录
this.$router.go(-1) //返回

6.二级路由

1.pages创建相关组件

home 首页
cate 分类
shop 购物车
mine 我的

2.路由出口 [ src/pages/index/index.vue]

3.二级路由规则 [ router/index.js]

{
path: "/index",
component: index,
// 二级路由规则，path不加"/"
children: [
{
path: "home",
component: home
},
{
path: "cate",
component: cate
},
{
path: "shop",
component: shop
},
{
path: "mine",
component: mine
},
// 二级重定向
{
path:"",
redirect: "home"
}
]
},

4.底部导航高亮效果1 router-link-active

.footer .router-link-active{
color: blue;
}

5.路由导航高亮2 active-class

首页
分类
购物车
我的

.footer .select{
color: blue;
}

7.home.vue 路由导航

8.movie.vue 返回