# vue3-hello

**Repository Path**: qinpmc/vue3-hello

## Basic Information

- **Project Name**: vue3-hello
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-23
- **Last Updated**: 2024-11-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-hello

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Compile and Minify for Production

```sh
npm run build
```




创建vue3工程

```
npm create vue@latest
```



npm install  报错(切换到淘宝镜像)  request to https://registry.npm.taobao.org/vuex failed, reason: certificate has expired：

- https://blog.csdn.net/weixin_45024453/article/details/138277457


```
npm cache clean --force  //清空缓存

npm config get registry  //查看当前的npm镜像设置

npm config set registry https://registry.npmmirror.com  //切换到新的淘宝镜像

-- npm config set registry https://registry.npm.taobao.org  //旧的淘宝镜像。注意：证书已过期
```



- https://www.jianshu.com/p/46e5223086b3  【web前端】passive是个啥？


```
1.passive是个啥？
passive是监听事件时候新增的一个选项
以前js中监听事件是这样写的

addEventListener(type, listener[, useCapture ])
第一个参数是要监听的事件类型，第二个参数是事件的回调函数，第三个参数是是否允许事件捕获

现在监听事件这样写


 addEventListener(type, listener, {
    capture: false, 
    passive: false, 
    once: false 
})
第三个参数变成了一个对象，有三个属性，
第一个capture就是之前的useCapture，
第二个passive
 

passive就是为了改善移动端滚屏性能而设计的
简单说就是如果你监听了window的scroll或者touchmove事件，你应该把passive设置为true，这样滚动就会流畅很多，像这样

elem.addEventListener('touchmove', function listener() { /* do something */ }, { passive: true })
 
3.passive的原理
passive为false时，浏览器执行完回调函数才知道有没有调用preventDefault，如果没有调用preventDefault，再去执行默认行为，就是滚动。这样就回造成滚动不流畅。
passive为true，就是告诉浏览器不会调用preventDefault，浏览器直接执行滚动就行，不用考虑回调函数了。
这时，即使你在回调函数里调用preventDefault也不会生效。
mdn中说，在有些浏览器（特别是Chrome和Firefox）中，你监听window、document或者document.body上的touchstart和touchmove，会将passive默认设置为true。
还是要提醒大家，在你不需要调用preventDefault的时候，监听scroll或者touchmove，将passive设置为true

```

 

- https://juejin.cn/post/7192584563799883832 JS中的事件冒泡、事件捕获、事件委托





# Vue router和route区别 - https://juejin.cn/post/7225524569506414653

## $router 介绍  
$router是Vue Router的实例，包含了整个路由器的配置信息，可以理解为全局的路由控制器。它提供了一些方法和属性，比如push、replace和go等方法，用于改变URL，以及currentRoute、matched等属性，用于获取路由相关信息。

```    
export default {
  methods: {
    goToPage() {
      // 使用$router.push来改变URL
      this.$router.push('/page')
    }
  }
}
```
  
 
## $route 介绍   
$route是当前激活的路由对象，包含了当前URL解析得到的信息。也就是说，每次改变URL时，$route都会更新。
$route对象有很多属性，比如path表示当前路径，query表示查询参数，params表示动态路由参数，还有hash、fullPath等属性，可以根据具体需要来使用。


```
export default {
  created() {
    console.log(this.$route.path) // 输出当前路径
    console.log(this.$route.params.id) // 输出动态路由参数id
  }
}

```


## $router 与 $route区别  
综上所述，router是Vue Router的实例，提供了路由控制器的一些方法和属性，用于改变URL和获取路由相关信息。而router是VueRouter的实例，提供了路由控制器的一些方法和属性，用于改变URL和获取路由相关信息。而route是当前激活的路由对象，包含了当前URL解析得到的信息。