技术栈组合Vite Vue3 TypeScript Ant Design Vue Pinia Axios以 pnpm run dev 启动 Vue 项目举例 操作系统启动 Node.js pnpm 借助 Node 去执行项目内的 vite 程序 Vite 启动开发服务器 Vite 处理 编译 .vue 组件 编译 TypeScript → JavaScript 浏览器访问地址加载编译完成的代码渲染页面Node.js【底层运行环境】JavaScript 默认只能跑浏览器。 Node.js 让 JS 可以运行在电脑 / 服务器。Node.js ≈Chrome V8 引擎 内置底层 APIlibuv、fs、net、http 等V8负责解析、执行 JS 代码libuvC 写的跨平台异步 I/O 库提供事件循环、文件读写、网络、定时器内置模块fs、path、http、stream……浏览器不存在这些 APIVite、Webpack 为什么需要 Node 构建工具要读写本地文件只有 Node 环境具备 fs 文件能力浏览器做不到。npm、pnpm、Vite、TS 编译器全部依托 Node.js 才能执行npm / pnpm【包管理器】管理第三方代码包作用下载、安装、管理项目依赖vue、axios、element-plus 等第三方库npmNode.js自带的包管理器pnpmnpm 的高性能替代品安装更快、磁盘占用更小pnpm/npm ≠ 构建工具只管 “下载代码”不负责编译页面。TypeScript【语言超集】 JS增强语言JavaScript 缺少类型TS 增加静态类型TS 不能直接被浏览器 / Node 识别必须编译成普通 JS才能运行Vite 内部内置能力可以自动编译.ts文件简单流程*.ts → Vite处理 → 输出JSVite【构建工具】编译、启动服务、打包webpack也是构建工具启动本地开发服务dev编译代码Vue 组件、TS、CSS、图片打包生成上线静态资源build运行条件Vite 本身是一个 Node 程序必须通过 Node pnpm/npm 启动Vue3 UI 组件库Element Plus或Ant Design VueTailwind CSS原子化 CSS 框架Axios【JS通用HTTP 请求库】负责和后端接口通信发 get/post、请求拦截、响应拦截、统一处理报错、携带 token。不属于 Vue 生态JS 通用请求库职责单纯发送网络请求。Pinia【Vue3 官方状态管理库】替代 Vuex存放全局共享数据用户信息、菜单、字典、全局加载状态统一封装请求业务逻辑组件不再到处写接口数据全局可访问组件修改数据一处更新多处响应。Vue/React【前端框架】写页面组件Vue3 中的应用是通过使用 createApp 函数来创建的应用实例必须在调用了 .mount() 方法后才会渲染出来.mount()方法接收一个容器参数可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串div idhello-vue classdemo {{ message }} /div script const HelloVueApp { data() { return { message: Hello Vue!! } } } Vue.createApp(HelloVueApp).mount(#hello-vue) /scriptVUE基础语法Vue 单文件组件Single File Component简称 SFC是 Vue.js 框架的文件格式它允许开发者将 HTML、JavaScript 和 CSS 代码放在一个文件中通常以 .vue 为文件后缀。模板语法Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。插值Vue.js 使用双大括号 {{ }} 来表示文本插值div{{ message }}/div指令带有前缀 v- 的特殊属性用于在模板中表达逻辑v-bind: 动态绑定一个或多个特性或一个组件 prop。a v-bind:hrefurlLink/a简写a :hrefurlLink/av-if / v-else-if / v-else: 条件渲染。v-for: 列表渲染。v-model: 双向数据绑定。v-on: 事件监听器。事件处理使用 v-on 指令来监听 DOM 事件并在触发时执行一些 JavaScript 代码。计算属性基于其依赖进行缓存的属性。计算属性只有在其相关依赖发生变化时才会重新计算template div p原始金额{{ amount }}/p p税后金额{{ computedAmount }}/p /div /template script export default { data() { return { amount: 100 }; }, computed: { computedAmount() { return this.amount * 1.1; // 假设税率为10% } } }; /scriptcomputedAmount 是一个计算属性基于 amount 计算出税后金额。当 amount 改变时computedAmount 会自动更新而不需要手动触发视图更新。组件组件是 Vue 页面的独立可复用模块包含结构、样式、逻辑父传子propscomponent组件允许你使用小型、独立和通常可复用的组件构建大型应用。!-- Demo.vue 单文件组件结构 -- template !-- HTML 模板 -- div{{ msg }}/div /template script setup // 组合式APIVue3推荐写法 const msg Vue组件示例 /script style scoped /* scoped样式只作用于当前组件 */ div { color: #333; } /style页面组件路由页面views/ 目录业务组件业务通用模块components/基础通用组件按钮、弹窗、输入框UI 库 / 自行封装Props 和事件父组件传子组件props子传父emit双向数据绑定v-model!-- 父 -- Child v-model:valuetext / !-- 子 -- script setup const props defineProps([value]) const emit defineEmits([update:value]) /script其他通信方式provide / inject跨多层祖孙组件传值Pinia全局状态管理复杂项目首选替代 Vuexmitt轻量事件总线简单跨组件通知Vue3 声明式渲染Vue3 的声明式渲染是一种基于模板的渲染方式通过使用模板、指令如 v-if、v-for、v-bind 等以及响应式数据来简化 UI 更新过程数据绑定v-model核心通过绑定数据Vue 可以自动更新 DOM 元素的内容避免了传统的手动 DOM 操作Vue3 路由Vue Router 负责将 URL 路径与应用中的组件进行映射当用户在应用中浏览时URL 会更新但页面不会重新加载从而提供流畅的用户体验。创建路由表// src/router/index.js import { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue import About from ../views/About.vue const routes [ { path: /, component: Home }, { path: /about, component: About } ] export default createRouter({ history: createWebHistory(), routes })在应用中挂载// main.js import { createApp } from vue import App from ./App.vue import router from ./router createApp(App).use(router).mount(#app)页面出口router-view/router-view跳转router-link to/aboutAbout/router-link动态路由懒加载导航守卫鉴权重定向Vue3 组合式 APIComposition API
