寒假集训——十六

vue-cli 4.5的使用

npm install -g @vue/cli (一次安装) vue --version 查看版本
vue create myapp
*npm run serve开发环境构建
*npm run build生产环境构建
*npm run lint代码检测工具

1 style标签加上scoped属性， css局部生效
2 style标签加上lang=“scss”， 支持scss

eslint

vscode自动修复eslint安装eslint插件，并启用[文件]=>[首选项]=>[设置]=>用户，找到setting.json,加上以下配置

"editor.codeActionsOnSave":{
"source.fixAll":true
}

反向代理&别名

首先找到 vue.config.js文件
在request.js里面配置

spa&路由引入

SPA（单页面应用程序），项目中只需要1个html页面，多个功能组件，页面跳转其实就是切换组件。
单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序：对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势:减少了请求体积，加快页面响应速度，降低了对服务器的压力(以前的开发是jsp,现在是html–静态页面不用访问服务器) 更好的用户体验，让用户在web app感受native app的流畅

重定向

当进入页面时，你希望第一个跳转出的是你主页面或者是子页面时
重定向操作{path:‘/’,redirect:‘/login’}

声明式导航

<router-link to="路径"> router-link>

作用:

1. 更方便的实现路由跳转, 不需要想要不要加 #, 还会自动添加高亮的类名
2. 自动添加类名 router-link-active 模糊匹配 router-link-exact-active 精准匹配
3. router-link实质上最终会渲染成a链接 to属性等价于提供 a 标签 href属性(to无需#)
   说明:
4. router-link是 VueRouter提供的全局组件 本质就是a标签
5. router-link当标签使用 必须传入to属性 指定路由路径值

注意:
to属性设置跳转路径

嵌套路由

通过 Vue Router，你可以使用嵌套路由配置来表达这种关系

编程式导航

不可跳转到指定路径:
向前或向后跳转n个页面，n可为正整数或负整数
可跳转到指定路径：

this.$router.push('/');(不携带数据跳转，一般可以直接跳转到登录页)
this.$router.replace('/');(不携带数据跳转，一般可以直接跳转到登录页)
this.$router.push('/xxx')(不携带数据跳转)
this.$router.push({path:'/xxx'})(不携带数据跳转)
this.$router.push({name:'xxx'})(不携带数据跳转，路由里需要配置name)
this.$router.push({path:'/xxx',query:{data:'data'}})//类似get请求  数据会暴露在地址栏  (携带数据跳转)
this.$router.push({name:'xxx',params:{data:'data'}})//数据不在地址栏  (携带数据跳转，路由里需要配置name)

动态路由

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()
调用 router.replace()

router.addRoute({ path: '/about', component: About })
// 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中）
router.replace(router.currentRoute.value.fullPath)

通过使用删除路由

router.removeRoute()

按名称删除路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用Symbol作为名字。
当路由被删除时，所有的别名和子路由也会被同时删除

路由拦截

通过vue-router的beforeEach方法进行每一次路由访问的拦截，判断拦截信息中是否有鉴权要求或者权限校验，以此来实现鉴权 如果权限不够，访问的路径虽然存在但会被拦截。

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
component (和 components) 配置接收一个返回 Promise 组件的函数 Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise ：

const UserDetails = () =>
  Promise.resolve({
    /* 组件定义 */
  })