vue3.2学习笔记

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、使用vite创建项目

执行命令

npm create vite

输入项目名称

选择创建vue项目

拥抱TS，选择vue-ts

按照提示，cd进入项目，安装依赖，启动项目

至此，vue3.2项目已经创建完成，可以正常启动项目

二、使用volar替换vetur

在使用vscode开发中，由于使用vue2开发时会安装 vetur 插件检测、高亮vue代码，但是在vue3中并不适用，会出现编辑器如下报错，我们需要使用volar来替换vetur

1、在vscode插件库中找到已安装的vetur，进行卸载或安装禁用(如果未来还要使用vscode维护或者开发vue2的项目，建议禁用，需要时重新启用)

2、在插件库中搜索volar，进行安装并启用

三、vite 配置

1、修改项目启动端口号
在vite.confij.ts中，修改默认端口号

export default defineConfig({
  server: { // 修改端口号
    port: 3001
  },
  plugins: [vue()]
})

2、别名
由于node默认是不支持ts，所以需要引入一个库包，可以使node在ts中正常使用
进入项目目录，执行以下命令

npm install @types/node --save-dev

安装完成后，即可正常设置别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  server: { // 修改端口号
    port: 3001
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src'),
      "com": path.resolve(__dirname, 'src/components')
    }
  },
  plugins: [vue()]
})

我在此设置了@来代表src目录，com代表src/components目录，后续可根据自己需要设置别名

四、初识setup语法糖

组合式API中初始化变量，并使用时

<script lang="ts">
import { reactive, ref, computed } from 'vue'
  export default {
    setup() {
      const count = ref(1)
      const obj = reactive({
        a: 1,
        b: 2
      })

      const sum = computed(() => {
        return count.value + obj.b
      })

      return {
        count,
        obj,
        sum
      }
    }
  }
</script>

<template>
  <h1>{{ count }}</h1>
  <h1>{{obj.b}}</h1>
  <h1>{{sum}}</h1>
</template>

而在使用setup语法糖时，代码简洁如下

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
const count = ref(1)
const obj = reactive({
  a: 1,
  b: 2
})

const sum = computed(() => {
  return count.value + obj.b
})
</script>

<template>
  <h1>{{ count }}</h1>
  <h1>{{ obj.b }}</h1>
  <h1>{{ sum }}</h1>
</template>

五、父组件向子组件传值 defineProps

在组合式api中，子组件接收父组件传值用props方法，如下

<script lang="ts">
  export default {
    props: {
      msg: {
        type: String,
        required: true,
        default: 'hello'
      },
      ageList: {
        type: Array,
        required: true
      }
    }
  }
</script>

<template>
  <h1>{{msg}}</h1>
  <div v-for="(item, index) in ageList" :key="index">
    <li>{{item}}</li>
  </div>
</template>

而在setup语法糖中，可以使用defineProps方法

defineProps({
  msg: {
    type: String,
    required: true,
    default: 'hello'
  },
  ageList: Array
})

在使用setup语法糖同时使用ts时，为了确认变量类型，也可以使用如下方法

defineProps<{
  msg?: String,  // ?: 表示此变量可选，即可传可不传
  ageList: Array<number>
}>()

如果props需要在js中使用，或者给传参一个默认值时，可以使用 widthDefaults方法

const props = withDefaults(
  defineProps<{
    msg？: string, // 首字母需要小写
    ageList: Array<number>
  }>(),{
    msg: 'hello',
    ageList: () => [1,2]
  }
)

六、子组件向父组件传值 defineEmits

在setup语法糖中，子组件向父组件传值时，使用defineEmits

<script setup lang="ts">
  const emits = defineEmits(['parentClick'])
  const clickEmits = () => {
    emits('parentClick', '我是子组件传的值')
  }
</script>

<template>
  <button @click="clickEmits">子传父</button>
</template>

在父组件中接收时，和vue2中语法类似

<script setup lang="ts">
import DefaultEmits from './components/DefaultEmits.vue';
const parentClick = (msg: string) => {
  console.log(msg)
}
</script>

<template>
  <DefaultEmits @parentClick="parentClick"></DefaultEmits>
</template>

类型声明

<script setup lang="ts">
  const emits = defineEmits<{
    (e: 'parentClick',data: string):void
  }>()
  const clickEmits = () => {
    emits('parentClick', '我是子组件传的值')
  }
</script>

<template>
  <button @click="clickEmits">子传父</button>
</template>

七、安装sass和element-plus

安装element-plus

npm install element-plus --save

安装sass预处理器

npm install sass-loader sass --save-dev

element-plus官方文档介绍比较详细，在此不详述