写在前面
上一篇有写到vue的node环境的安装,具体的地址node安装,可点过去看下安装步骤,目前去node官网下载默认是最新版本的18.15.0版本。这个版本可能有些高,可以选择跟目前项目匹配的版本下载安装即可。
如果项目启动遇到项目启动不成功,如下图
这样肯定是node版本的问题,解决方案如下
node.js版本问题需要输入命名来解决,或者是用node的nvm版本管理器调整相应的版本。
命令方式:
在编辑器终端命令行输入如下命令。
命令行输入:$env:NODE_OPTIONS=“–openssl-legacy-provider”
正常解决:
1.npm常用命令
NPM是Network Power Manager缩写,是网络管理电源控制器。安装了node.js之后就可以使用npm命令操作了,因为npm是node.js包管理器。它可以让开发者下载、安装、上传以及管理已经安装的包。
比如一下命令操作:
- npm install 安装模块
- npm uninstall 卸载模块
- npm update 更新模块
- npm outdated 检查模块是否已经过时
- npm ls 查看安装的模块
- npm init 在项目中引导创建一个package.json文件
- npm help 查看某条命令的详细帮助
- npm root 查看包的安装路径
- npm config 管理npm的配置路径
- npm cache 管理模块的缓存
- npm start 启动模块
- npm stop 停止模块
- npm restart 重新启动模块
- npm test 测试模块
- npm version 查看模块版本
- npm view 查看模块的注册信息
- npm publish 发布模块
- npm access 在发布的包上设置访问级别
- npm package.json的语法。
cnpm介绍
已经知道了npm是什么了,那cnpm是什么呢? cnpm的官方介绍是:cnpm是一个完整npmjs.org镜像,是淘宝定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm: (3)如果因为网络原因无法使用npm下载,那cnpm这个就派上用场了,看到这,肯定知道了它的用途了吧。
下面就是cnpm的安装命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后有下载慢的包,可以使用cnpm命令进行下载,毕竟是国内的下载速度肯定能提升很多。
vue生命周期
项目前端如果使用Vue实现,必须要知道vue的生命周期,生命周期就是Vue实例从创建到销毁的过程,
vue实例有一个完整的生命周期,即从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
上图这个是v2.0版本的生命周期钩子,那vue3.0有哪些变化呢?
setup取代beforeCreate和created
setup中的函数执行相当于在选项api中的beforeCreate和created中执行
组合式api的生命周期需引入使用
eforeMount -> onBeforeMount,在挂载前被调用
mounted -> onMounted,挂载完成后调用
beforeUpdate -> onBeforeUpdate,数据更新时调用,发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改,但还没有更新到页面上
updated -> onUpdated,数据更新后调用,此时内存数据已经修改,页面数据也已经更新
beforeUnmount -> onBeforeUnmount,组件卸载前调用
unmounted -> onUnmounted,卸载组件实例后调用。
errorCaptured -> onErrorCaptured,每当事件处理程序或生命周期钩子抛出错误时调用
renderTracked -> onRenderTracked,状态跟踪,vue3新引入的钩子函数,只有在开发环境有用,用于跟踪所有响应式变量和方法,一旦页面有update,就会跟踪他们并返回一个event对象
renderTriggered -> onRenderTriggered,状态触发,同样是vue3新引入的钩子函数,只有在开发环境有效,与onRenderTracked的效果类似,但不会跟踪所有的响应式变量方法,只会定点追踪发生改变的数据,同样返回一个event对象
activated -> onActivated,与keep-alive一起使用,当keep-alive包裹的组件激活时调用
deactivated -> onDeactivated,与keep-alive一起使用,当keep-alive包裹的组件停用时调用
写到最后
写到这里,是不是对vue生命周期的知识点又了解了一些,了解了更多的知识请关注公众号。文章来源:https://www.toymoban.com/news/detail-406526.html
文章来源地址https://www.toymoban.com/news/detail-406526.html
到了这里,关于【前端】重学vue,vue生命周期基础知识了解一下的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!