Vue3+TS+Vite学习总结

来个辣椒不加辣

于 2024-08-26 17:43:43 发布

阅读量401

点赞数 8

文章标签：学习

本文链接：https://blog.csdn.net/u010346178/article/details/141569880

版权

最近在使用Vue3+TS+Vite来重构SSS-RBAC-ADMIN的前端项目，因此需要花点时间来认识下它们。下面我就直接用这个项目的代码来作讲述，备注：下面用到的版本必须是node.js>=14.18.1,yarn>1.0.x

首先我们先学会搭建一个Vue3项目

安装（直接引用Vite官方文档）

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

然后它会提示你选择模板，语言等等，就不过多介绍了，不会的点这里

安装完成后就开始步入正题

一、Vue文件模板

<template>
  <div>这里就跟之前的Vue版本一样，没太大区别</div>
</template>

<script setup lang="ts"></script>

// 样式也没太大区别，样式可以外部引入src="xxx.css"
<style scoped src="./xxx.css"></style>

二、重点是语法上的区别，下面就一点点来看如何用响应性基础 API（PS：因为选项型API和之前版本的差不多，就不过多介绍，如需要待补充）

如何定义data？

import {ref, reactive} from "vue";

// 定义简单类型data用ref，如string、number、数组
const count = ref<number>(0);

// 定义复杂类型用reactive
const user = reactive({
  nickname: string,
  age: number
});

如何定义方法？

<template>
  <button @click="onClick">click me</button>
</template>

<script setup lang="ts">
const onClick = () => {
  console.log('Hello world');
}
</script>

生命周期的使用（这里直接就举例mounted，更多请看这里）

// 组件挂载后调用
onMounted(() => {
  init();
});

const init = () => {
  console.log('init to do something.');
}

4. 父子组件传参

子组件,Child.vue

import {toRefs} from "vue";

// 定义props，并且设置pageNum,pageSizes默认值
const props = withDefaults(defineProps<{
  pageNum?: number,
  keyWord: string,
  pageSizes?: number[]
}>(), {
  pageNum: 0,
  pageSizes: () => [15, 25, 35, 45, 55],
});

// html中使用和以前一样，{{keyWord}}
... 

// 方法中使用（需要解剖props，其实这种响应式语法和react非常像）
onMounted(() => {
  let {pageNum, keyWord} = toRefs(props);
  console.log(pageNum, keyWord);
});

父组件传递

<template>
  <Child pageNum="12" keyWord='live1024' :pageSizes="[20,30,40]"></Child>
</template>

5. 父子组件方法传递

子组件Child.vue

<template>
  <button @click="remove">remove this</button>
</template>

<script>
const emit = defineEmits<{
  (e: 'remove', id: string): void
}>();

const remove = () => {
  emit('remove', 'id...')
}
</script>

父组件

<template>
  <Child @remove="onRemove"></Child>
</template>

<script setup lang="ts">
const onRemove = (id: string) => {
  console.log(`remove=${id}`);
}
</script>

项目打包优化

UI组件按需引入，例如：https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5
路由懒加载：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html