前端开发必备的基础框架,这节总结梳理下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就方便很多。