独立开发者系列(29)——vue3开发前置梳理

前端开发必备的基础框架,这节总结梳理下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没有的)

  1. 理解vue里面的虚拟dom vue在每次组件变动会创建一个新的虚拟dom,并和之前dom进行比较,将不同部分更新上去
  2. 数据的双向绑定上面例子里面 v-model 就是绑定了变量和input 俩者任意变动,都会造成变量值和input值变动 双向绑定 所以只要只要改变数据的值,input也自动改变了
  3. 理解响应式系统 传统的代码里面,改变后需要刷新页面,而在vue里面,数据变动会被劫持,所以可以实时响应数据(这个概念很有用,热更新概念)

基础代码逻辑已经走通,下一步,是打包逻辑。我们开发好的代码,需要打包并发布。暂停我们之前的npm run dev 重新运行命令行 npm run build

这样就完成默认的打包,只要我们将我们dist里面的代码直接发布,就完成了我们本次代码的开发。

在开发工作量比较小的时候,传统的开发速度更快捷一些,当开发量明显增大的时候,vue就方便很多。

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
G探险者3 小时前
聊一聊vue如何实现角色权限的控制的
vue
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
Pro_er7 小时前
深入浅出 Vue3:组件与模板基础全解析
vue·前端开发
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js