两双筷子 - 前端
type: channel
link: https://www.dbkuaizi.com/category/web/
items: Vue3+TS 笔记

Vue3+TS 笔记
type: item
date: 2024-12-01T12:31:00+00:00
description: 前言：本篇笔记内容来自于 B 站：《尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程》系列视频链接地址： https://www.bilibili.com/video/BV1Za4y1r7KE/创建 Vue 工程NodeJS安装 18.3 + 的 NodeJS https://nodejs.org/初始化项目通过 Vite 初始化一个 Vue 项目 Vite 会在运行目录创建一个 项目同名的目录PS E:\code> npm create vue@latest > npx > create-vue Vue.js - The Progressive JavaScript Framework √ 请输入项目名称： ... test_vue3 √ 是否使用 TypeScript 语法？ ... 否 / 是 √ 是否启用 JSX 支持？ ... 否 / 是 √ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是 √ 是否引入 Pinia 用于状态管理？ ... 否 / 是 √ 是否引入 Vitest 用于单元测试？ ... 否 / 是 √ 是否要引入一款端到端（End to End）测试工具？ » 不需要 √ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是 ? 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) » 否 / 是之后通过 vscode 打开项目目录.运行项目运行前端项目要先看一下项目根目录的 package.json 文件，里面包含了一些项目的信息：{ "name": "test_vue3", "version": "0.0.0", "private": true, "type": "module", "scripts": { "dev": "vite", "build": "run-p type-check \"build-only {@}\" --", "preview": "vite preview", "build-only": "vite build", "type-check": "vue-tsc --build --force" }, "dependencies": { "vue": "^3.4.29" }, "devDependencies": { "@tsconfig/node20": "^20.1.4", "@types/node": "^20.14.5", "@vitejs/plugin-vue": "^5.0.5", "@vue/tsconfig": "^0.5.1", "npm-run-all2": "^6.2.0", "typescript": "~5.4.0", "vite": "^5.3.1", "vue-tsc": "^2.0.21" } }可以看到 scripts 目录下可以 通过的 dev 命令来启动项目，通过 build 来打包编译。我们使用 npm run dev 启动项目项目结构项目入口是根目录中的 index.html 文件，里面有两个核心操作，声明了 #app 容器，所有前端的内容渲染（挂载）到这个容器上，然后引入了 main.ts 文件main.ts 文件中引入了 Vue 组件，并创建了一个 App 的组件，挂载了节点为 App 的容器上。以根目录为例，代码如下：/index.html 入口文件 Vite App /src/main.ts 文件// 引入 createApp 用于创建应用 import {createApp} from 'vue' // 引入 App 根组件 import App from './App.vue' // 挂载 组件 createApp(App).mount('#app')/src/App.vue 文件 你好啊！ 总结Vite 项目中，index.html 是项目的入口文件，在项目最外层。加载index.html后，Vite 解析 src\App.vue 根文件 123 <Person /> 注：Vue3向下兼容Vue2语法，且Vue3中的模板中可以没有根标签。Vue3 核心语法OptionsAPI 和 CompositionAPIVue2 的 API 设计是 Options （配置、选项）风格的Vue3 的 API 设计是 Composition（组合、组件） 风格的Options API 弊端Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。setupsetup 概述setup 是 vue3 中…