前端开发必备的基础框架，这节总结梳理下vue3的一些特性和开发。作为前端项目的预置基础。梳理下全部需要的技术栈，也方便下次开发回来进行索引。
环境安装（工具和环境，重要）
安装node （如果安装成功过，直接node -v 检查下对应版本 需要node版本大于15），在这篇文章里面我们已经完成过搭建 独立开发者系列（2）------搭建常用语言运行环境 。
安装vue npm init vue@latest 执行命令后 完成
官方推荐开发IDE 是vscode ，IDE很关键，在之前我开发VUE使用的是phpstorm，结果发现开发效率很低，专业的工具+插件可以针对性的让编码效率提升几倍。导入命令安装的代码基础结构，vscode会提示安装官方插件Vue.volar 扩展，能自动识别vue的相关模板。
项目的目的结构认识:
如果引入插件，需要在package.json里面添加，vite.config.js是vue的项目配置。
启动项目 npm run dev 项目启动时可以直接运行 浏览器里面已经可以看到你loalhost:5173 可以开始调试开发对应的vue程序代码 （每次开发）
如何让代码在vscode里面实现HB里面 实时开发代码 右边实时显示结果，这样不用来回在浏览器和IDE之间来回切换，大幅度提升效率。相比使用phpstorm开发前端，vscode优势明显，加上内置IDE更明显. 安装vscode的插件Browse Lite ``轻量浏览器，然后再页面找到输入命令面板
输入 Browse Lite Open... ``然后就可以看到我们代码和浏览器同步打开。
然后我们想实现一个编辑跳转的效果 我们在A页面点击一个vue, 就会跳转到对应的vue页面去进行改动开发（类似JAVA/PYTHON 的IDE 函数跟踪功能）,需要安装 Vue Peek``，然后就可以搜索。
环境已经配置好，代码引入也设置好。现在开始梳理vue3的基础使用语法。
首先我们来实现第一个效果:
一个输入框，如果我们填入的数字大于100，点击确认的时候，会显示一行字 提示我们输入的数值符合要求
``，
在可以看到{{inputVaule}}的模板语法，v-model的双向绑定值用法 触发函数事件 @click v-if的用法 vue的<script>的响应式变来京
函数的定义 const handleClick=() =>{} 箭头写法 返回对应的变量
一些vue里面的相关新概念列表： （传统div+css没有的）
- 理解vue里面的虚拟dom vue在每次组件变动会创建一个新的虚拟dom，并和之前dom进行比较，将不同部分更新上去
- 数据的双向绑定上面例子里面 v-model 就是绑定了变量和input 俩者任意变动，都会造成变量值和input值变动 双向绑定 所以只要只要改变数据的值，input也自动改变了
- 理解响应式系统 传统的代码里面，改变后需要刷新页面，而在vue里面，数据变动会被劫持，所以可以实时响应数据（这个概念很有用，热更新概念）
基础代码逻辑已经走通，下一步，是打包逻辑。我们开发好的代码，需要打包并发布。暂停我们之前的npm run dev 重新运行命令行 npm run build
这样就完成默认的打包，只要我们将我们dist里面的代码直接发布，就完成了我们本次代码的开发。
在开发工作量比较小的时候，传统的开发速度更快捷一些，当开发量明显增大的时候，vue就方便很多。