18 Vue 3 基础与 Vite 项目构建_第1页
18 Vue 3 基础与 Vite 项目构建_第2页
18 Vue 3 基础与 Vite 项目构建_第3页
18 Vue 3 基础与 Vite 项目构建_第4页
18 Vue 3 基础与 Vite 项目构建_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

罗荣良Vue3基础与Vite项目构建本节学习目标1.理解Vue3的核心理念(响应式、组件化)2.掌握前端运行环境Node.js的配置3.理解Vite构建工具的优势4.实战：创建并运行第一个Vue3项目5.剖析Vue项目标准目录结构为什么选择Vue3？渐进式框架：易上手，可大可小。高性能：虚拟DOM算法重写，比Vue2快。CompositionAPI：逻辑复用更强(类似Java的Service拆分)。TypeScript支持：原生支持，类型更安全。Vue的工作原理简图Model(JS数据)<-->ViewModel(Vue)<-->View(DOM页面)核心：双向绑定(数据变，页面自动变)。类比：Java开发需要JDK->前端开发需要Node.jsMaven管理依赖->npm(或pnpm/yarn)管理依赖检查版本：node-v(建议v16+)。前端开发的JDK：Node.js新一代构建工具：ViteVite(法语“快”)：1.秒级启动(基于ESModules)。2.热更新(HMR)极其迅速。3.Vue官方推荐。实战：创建Vue3项目命令：npmcreatevite@latest交互式选项截图：TypeScript?(No/Yes)VueRouter?(Yes)Pinia?(Yes)项目初始化三步走1.进入目录：cdmy-project2.安装依赖：npminstall(下载node_modules)3.启动项目：npmrundev项目目录结构解析(Root)项目结构：node_modules/:依赖包(黑洞，别动它)public/:静态资源(favicon等)src/:源代码目录(核心战场)index.html:单页面入口vite.config.js:Vite配置文件Src目录详解assets/:图片、CSS等静态资源components/:公共组件(按钮、头部)router/:路由配置stores/:状态管理(Pinia)App.vue:根组件(所有页面的父容器)main.js:程序入口解释：把App.vue挂载到index.html的#app节点上。程序入口：main.jsVue的核心：单文件组件(SFC).vue文件=HTML+JS+CSS三个标签：1.<scriptsetup>:逻辑(JavaScript)2.<template>:结构(HTML)3.<stylescoped>:样式(CSS)单文件组件结构演示Chrome网上应用店->Vue.jsdevtools。作用：在浏览器控制台查看组件结构、数据状态。地位：前端开发的Debugger。安装VueDevTools插件IDE推荐：VSCode+Vue-Official

VSCode：前端首选编辑器。插件：1.Vue-Official:语法高亮、智能提示。2.ESLint/Prettier:代码格式化。本节小结与作业小结：Node.js环境、Vite创建项目、SFC结构。作业：1.安装Node.js

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论