Vue的脚手架开发详细笔记

最新推荐文章于 2024-06-17 02:23:22 发布

海也是风

最新推荐文章于 2024-06-17 02:23:22 发布

阅读量201

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/lyyrhf/article/details/115065386

版权

Vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

脚手架开发

1. Vue脚手架的介绍和安装

2. CI3项目初始化过程

3. CLI3配置文件的查看和修改

通过命令 vue ui 可以通过可视化界面进行配置的修改
通过在src文件下定义：vue.config.js

4. 箭头函数的使用和this指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //什么时候使用箭头
    //问题：箭头函数中的this是如何查找的呢？
    //答案: 向外层作用域中，一层层查找this，直到有this的定义
    const obj = {
        aaa() {
            setTimeout(function (){
                console.log(this)  //windows对象
            })

            setTimeout(()=>{
                console.log(this);  //obj对象
            })
        }
    }
</script>
</body>
</html>

5. 路由

5.1 路由的两种模式

#表示网页中的一个位置。其右边的字符，就是该位置的标识符。比如：
```
http://www.example.com/index.html#print
```
#print就代表网页index.html的print标识符所在的位置。浏览器读取这个URL后，会自动将print标识符位置滚动至可视区域。（单页应用）
为网页位置指定标识符，有两个方法。
- a. 使用锚点，比如：
```
<a name="print"></a>
```
- b. 使用id属性，比如：
```
<div id="print">
```
#后面的任何字符，都会被浏览器解读为位置标示符，即这些符号不会被发送到服务器端
改变==#不会触发网页重载，但会改变浏览器的浏览历史==

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnyK0DYI-1616379218114)(E:\学习笔记\图片\image-20201209143050256.png)]$

pushState()方法是在历史记录中增加一条新的记录；
replaceState()方法是当前的历史记录给替换掉
history模式和hash模式的异同：
- 相同点：都可以改变url，并且不使页面刷新
- 不同点
  - history模式中的url中不带hash符：#
  - history必须覆盖全路由，一旦没有全路由返回的资源或者html文件就会404，但是hash模式不会，==#==后面的根本不传入url

5.2 router安装和配置方式

5.3 路由映射配置和呈现

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VtnL6qjQ-1616379218117)(E:\学习笔记\图片\image-20201209153020822.png)]$

5.4 路由的默认值和修改history

默认值的设置：path不写，然后重定向到指定的路径

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sb3mpRjR-1616379218119)(E:\学习笔记\图片\image-20201209155029810.png)]$
将默认的hash模式改为hostory模式

5.5 router-link其他属性的补充

当遇到此情况时：由于在两个路由连接中均有/，因此跳转到/start的时候也会激活/,因此需要加入一个严格匹配的属性exact：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eXrNA6bd-1616379218121)(E:\学习笔记\图片\image-20210306161959479.png)]$

5.6 通过代码跳转路由

5.7 动态路由的使用

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o0qEzZjN-1616379218122)(E:\学习笔记\图片\image-20201209171928189.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tODBwwbB-1616379218124)(E:\学习笔记\图片\image-20201209171942038.png)]$

5.8 路由的懒加载

为什么要使用懒加载的方式？

1.为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

2.懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

5.9 路由的嵌套使用

// 配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// 1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)


// 2.创建VueRouter对象
const routes=[
    {
        path: '/home',
        component: () => import('../components/Home'),
        children: [
            {
              path: '',
              redirect: 'news'
            },
            {
                path: 'news',
                component: ()=> import('../components/HomeNews')
            },
            {
                path: 'message',
                component: ()=> import('../components/HomeMessage')
            },
        ]
    },
    {
        path: '/about',
        component: () => import('../components/About')
    },
    {
        path: '',
        //重定向
        redirect: '/home'
    },
    {
        path: '/user/:userId',
        component: () => import('../components/User')
    }
]


const router= new VueRouter({
    //配置路由和组件之间的映射关系
    routes,
    mode: 'history',
    linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例
export default router

5.10 vue-router-参数传递

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4bquqImU-1616379218124)(E:\学习笔记\图片\image-20201210111213771.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RzFSnwn8-1616379218125)(E:\学习笔记\图片\image-20201210112259512.png)]$

5.11 router.beforeEach

通过路由中的meta数据，然后通过router.beforeEach跳转实现不同的网页标题。

router.beforeEach((to,from,next) => {
    document.title=to.matched[0].meta.title
    next()
})

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
- next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

5.12 keep-alive

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-42qa2D0M-1616379218126)(E:\学习笔记\图片\image-20201210145954529.png)]$

切记不要将激活的属性写错，是keepAlive不是keepalive

钩子函数：

activated（）：当组件被激活时就调用
deactivated（）：当组件失活时就调用

5.6 文件路径的引用问题

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HUdgh231-1616379218126)(E:\学习笔记\图片\image-20201211110506559.png)]$

海也是风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的脚手架开发详细笔记

脚手架开发1. Vue脚手架的介绍和安装2. CI3项目初始化过程3. CLI3配置文件的查看和修改通过命令 vue ui 可以通过可视化界面进行配置的修改通过在src文件下定义：vue.config.js4. 箭头函数的使用和this指向<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tit
复制链接

扫一扫