1、Vite简单操作

安装

  1. yarn global add create-vite-app@1.18.0

创建项目

文档的命令

  1. npm init vite-app 项目名
  2. yarn create vite-app 项目名

等价于

  1. 全局安装后
  2. cva 项目名
  3. 或
  4. npx create-vite-app 项目名

2、Vue3与Vue2的区别

  • Vue3的Template支持多个跟标签，Vue2不支持
  • Vue3有createApp()，而Vue2是new Vue()
  • createApp(组件)，new Vue({template,render})

3、Vue-router 4

3.1 查看所有版本号

  1. npm info vue-router versions

3.2 安装vue-router 4

  1. yarn add vue-router@4.0.0-beta.3

3.3 初始化vue-router

新建history对象

在main.ts中添加

  1. import {createWebHashHistory, createRouter} from 'vue-router'
  3. const history = createWebHashHistory()

新建router对象

  1. const router = createRouter({
  2.   history,
  3.   routes: [
  4.     {path: '/', component: Easyw},
  5.   ],
  6. });

app.use(router)

  1. const app = createApp(App);
  2. app.use(router);
  3. app.mount('#app'); // 挂载组件

在App.vue中添加router-view

  1. <template>
  2.   <router-view/>
  3. </template>

在routers中添加其他测试路由

  1. routers: [{
  2.     {path: '/', component: Easyw},
  3.     {path: '/test', component: Test},
  4. }]

在App.vue中添加router-link

  1.   <router-link to="/">Easyw</router-link>
  2.   <router-link to="/test">Test</router-link>

3.4 添加子路由

  1. const history = createWebHashHistory();
  2. const router = createRouter({
  3.   history,
  4.   routes: [
  5.     {path: '/', component: Home},
  6.     {
  7.       path: '/doc', component: Doc, children: [
  8.         {path: 'switch', component: SwitchDemo},
  9.         {path: 'switch', component: SwitchDemo},
  10.       ],
  11.     },
  12.   ],
  13. });

3.5 路由切换时进行操作

先导入你的router文件

  1. import router from './router'
  1. router.afterEach(() => {
  2.   console.log(1);
  3. });

4、provide和inject

4.1 实现思路

在最外层的页面中，定义provide变量。然后在子组件中使用inject可以及时拿到该变量。

4.2 使用步骤

在最外层声明
App.vue

  1. <script lang="ts">
  2. // 导入相应内容
  3. import {provide, ref} from 'vue
  5. export default {
  6.  setup(){
  7.    // 使用ref设置默认值
  8.    const asideVisible = ref(false)
  9.    // 使用provide设置名字以及它对应的值，供子组件访问其数值
  10.    provide('asideVisible', asideVisible)
  11.  }
  12. }
  13. </script>

子组件.vue

  1. <script lang="ts">
  2.   // 导入相应内容
  3.   import {inject, Ref} from 'vue';
  5.   export default {
  6.     setup() {
  7.       // 使用inject获取名为asideVisible的provide
  8.       const asideVisible = inject<Ref<boolean>>('asideVisible');
  9.     },
  10.   };
  11. </script>

5、props外部传参

5.1 实现思路

在外部定义一个需要传参的属性名，后面带上需要传递的参数。在子组件中使用props接受该参数。如果需要修改使用context.$emit和$event进行数据的修改。

5.2 使用步骤

外部组件

定义属性

  1. setup(){
  2.   const value = ref(true)
  3. }

传递参数，并定义事件名

  1.     <Switch :value="value" @update:value="value = $event"/>

子组件

接受参数

  1. props: {
  2.   value: Boolean
  3. }

修改参数

  1. setup(props, context){
  2.   const modify = () => {
  3.     context.$emit('update:value', !props.value)
  4.   }
  5. }

5.3 使用v-model简化

删除外部事件名，使用v-model代替

  1.     <Switch v-model:value="value"/>

注意：如果使用v-model，子组件内部的触发事件名必须为 update:外部定义的参数名