摘要： 一：什么是生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册j 阅读全文

摘要： 上一部分中我们说到的ref只是作为单个变量的响应。 Vue3.0中还为我们提供了一个对象式响应的reactive函数 。 Reactive函数创建一个响应式对象。 一：Reactive函数 其实，在我看来，reactive函数 就是VUE3.0为我们提供的替代VUE2.0中data的一个函数，因此， 阅读全文

摘要： Setup是VUE3.0中为我们新提供的的组件选项。 创建组件实例，然后初始化props，紧接着就调用setup函数，从生命周期钩子的视角来看，他在beforecreate之前调用。 setup()是函数，具有return，return函数中定义的变量，把其暴露给模板。 一：setup 1：Setu 阅读全文

摘要： 平常再做开发的时候，一般情况下不会将html，js，css代码写到一个文件中。 基本上都会写在各自对应的文件中，然后再引入即可。 那么在VUE中我们如何抽离vue文件中的js，与css代码呢？ 1：抽离javascript Home.vue <template> <div> <div :style= 阅读全文

摘要： 当我们访问的路由没有预先定义的时候，就会跳到一个空白的页面。 这样的体验不太好，那么我们需要配置，访问路由不存在时跳转404页面。 实现这个小功能我用到了vue-router的路由守卫功能。 在我们上一篇《VUE3（五）vue路由vue-router4》中的ts文件中添加如下代码： /** * 路由 阅读全文

摘要： 使用vue-router，这里特别说明一下，我这里记录的是vue-router文件的编写。及在页面中的使用。 我的站点主要分为三个部分： 1：pc端页面的路由 2：手机端页面的路由 3：后端管理系统的路由 因此，我这里会使用到路由嵌套（子路由）。 具体的用法请参照官方文档： https://rout 阅读全文

摘要： 更好的了解项目的目录结构，能更好的去开发项目： 当前展示的目录结构是基于vite搭建的项目。 目录结构如下图所示： 我的代码是托管在我自己的git服务器上边的，默认安装的时候是不存在的。 1：dist目录 存放打包之后的代码文件 2：node_modules 存放项目依赖的包目录 3：public 阅读全文

摘要： 上一篇中我们创建了项目并成功运行。 这里为我的项目添加依赖，我这里使用的是yarn。 1：安装vue-router yarn add vue-router@next 2：安装vuex yarn add vuex@@next 3：安装组件库Ant Design Vue yarn add ant-des 阅读全文

摘要： VUE3官方推荐使用vite来构建项目，但是并不是说之前使用vue-cli创建项目就不行了。 使用vue-cli创建项目，要确保你的vue-cli的版本要大于4.5.6. 一：安装vue-cli 建议使用 npm 安装 Yarn 安装不会默认安装 vue 命令。 1：命令 npm install - 阅读全文

摘要： VUE3.0第一篇。主要还是看一看官方的手册，做一个笔记。 官方文档网址： https://www.vue3js.cn/docs/zh/guide/introduction.html 这里看一下vue3.0的安装以及创建第一个项目。 官方对js包管理为我们提供了两个选择，npm和yarn。我这里比较 阅读全文