VUE3学习1-3

小满：课程很赞；

小满zs的博客_优快云博客-Vue3,typeScript,前端领域博主

第一章介绍 心得：

1、MVVM（Model-View-ViewModel）架构，Vue 的核心库只关注视图层（UI 用户界面）。

2、VUE3新特性：

最棒的一个特性是VDOM性能，VUE2采取全量对比方式，VUE3采取标记对比，提升了渲染性能；介绍 — Vue.js

新版地址文档快速开始 | Vue.js

第二章配置环境 心得：

1-NODEJS安装（引入npm）

下载 | Node.js 中文网

2-VITE项目构建（npm init vite@latest安装VITE)

官方文档开始 {#getting-started} | Vite中文网

npm init vite@latest
npm i
npm run dev 

第三章 目录和SFC 、 npm run dev心得：

 1-静态资源: public 下的不会被编译, assets 下的可编译

２-公共组件：components

3-全局：App.vue+main ts，跟index.html强关联；

4-入口文件：index.html (他刚开始不会编译这些js文件 只有当你用到的时候 如script src="xxxxx.js" 会发起一个请求被vite拦截这时候才会解析js文件)

5-VSCODE插件：Volar、TypeScript Vue Plugin(Volar):特征：

（1）编辑器快捷分割和vite动态预览功能

（2）代码智能提示

 

6-VUE内的<template> </template> 内容会传入 @vue/compiler-dom编译器，编译为JavaScript 的渲染函数，并附属到导出的组件上作为其 render(用于精简冗长重复代码的函数，

return createEement(, {}, [])

) 选项。（参数1：html内容；参数2：dom中的一些样式、属性、传的组件的参数、绑定事件之类；参数3:类型是数组，数组元素类型是VNode,设置分发的内容)

render函数的本质就是创建一个虚拟节点

7-<script setup>,该脚本会被预处理并作为组件的 setup() 函数使用，也就是说它会在每个组件实例中执行

8-<style>可以通过scoped限制局部样式，非全局；

9-npm机制

npm install XX：在node_modules/.bin/下创shell可执行脚本文件；

npm run xxx:  npm 会通过软连接 查找这个软连接存在于源码目录node_modules/vite

1. 查找规则是先从当前项目的node_modlue /bin去找,

2.找不到去全局的node_module/bin 去找 npm install  -g

3.再找不到 去环境变量去找(3个VITE：unix\windows\跨平台)