nanxing的博客

Vue2&Vue3知识目录Vue官网Vue Router官网Vuex官网语法篇Vue模板语法和常见的指令 Vue常见指令和key和diff算法 Vue的Option APIVue3的表单和开发模式webpack篇webpack的基础打包webpack打包其他资源Babel的使用webpack中devServer的使用及其他配置脚手架篇VueCli运行和源码思路Vite的使用语法篇Vue3组件化开发（一）Vue3组件化开发（二）Vue3组件化开发（三）Vue3

后台管理系统目录脚手架创建项目选择的配置项目搭建规范

Vue3+TS项目完结撒花Vue3+TS后台管理系统在线体验GitHub地址客官如果觉得还不戳，github上不妨顺手点个 ⭐️，鼓励一下吧。部分展示效果关于技术栈

Jenkins自动化部署安装Java环境安装Jenkins安装Nginx安装GitJenkins任务安装Java环境通过dnf工具来进行安装centos7：yum install dnfcentos8: 系统自带Jenkins依赖Java环境，需要先安装Java环境命令：# 远程仓库搜索是否有 java安装包dnf search java-1.8# 安装java对应版本dnf install java-1.8.0-openjdk.x86_64安装JenkinsJenkins

Vue项目在远程linux下部署使用的是nginx服务安装nginx #安装命令 yum install nginx #开启nginx服务 systemctl start nginx.service #跟随系统启动 systemctl enable nginx.service在服务器里输入命令，nginx安装在服务器 /etc/nginx路径下。将打包好的vue项目上传至服务器FileZilla等软件修改nginx里边的配置root对应路

关于对象分配给 ref 并在组件间传递的思考引发思考的案例：App.vue 组件内存在下面info数据。要将其传递给子组件 Home.vue。并且在Home中会对传递过去的值做操作。const info = ref({ name: "fzb", age: 21})直接传递，虽然可以修改，这种方法是通过对象的引用在修改，但是违反了单向数据流的原则。那么肯定对其做一些额外操作 ： 做一层浅拷贝const homeInfo = ref({ ...props.info });这样

Vue模板语法和常见的指令邂逅Vue3开发认识CDN和CND引入直接使用script标签 <script src="https://unpkg.com/vue@next"></script>下载源码和使用源码略过浏览器访问保存网页即可https://unpkg.com/vue@nexttemplate的抽离方式使用template标签使用script标签Mustche语法 — 胡子语法在html内嵌入{{ }}的语法展示数据内容可以是data、c

Vue常见指令和key和diff算法常见指令v-bind指令基本使用相应式数据不仅仅可以展示在胡子语法内，而且可以绑定到标签的属性上。v-bind的语法糖写法v-bind:href=""===>>> :href v-bind用 ： 表示v-bind绑定class对象语法v-bind绑定class数组语法v-bind绑定style 对象语法v-bind绑定style 数组语法v-bind动态绑定属性名称v-bind属性直接绑定一个对象类似于对象的解构

Vue的Option API方法 methodsmethods的基本使用methods方法绑定this计算属性 computedcomputed的基本使用computed的 setter 和 gettercomputed VS methods侦听器Watch的使用基本使用侦听器的配置选项侦听器watch的其他方式方法 methodsmethods的基本使用定义方法并使用methods方法绑定this计算属性 computedcomputed的基本使用定义属性并使用computed的 s

Vue3的表单和开发模式Vue的表单v-model的前奏v-model的到来v-model绑定其他修饰符绑定textarea绑定单个checkbox复选框单选框selectVue的开发模式(组件化开发)全局组件局部组件命名问题Vue的表单v-model的前奏这样写太麻烦了，有没有一种类似功能的语法糖呢v-model的到来直接实现上面一大段代码实现的功能v-model绑定其他修饰符绑定textarea绑定单个checkbox复选框单选框selectVue的开发模式(组件化

webpack的基础打包认识webpack和webpack的打包webpack的安装和基本打包webapack局部安装和打包过程webpack的默认入口和配置文件webapck.config.js文件自定义配置文件名字webpack打包依赖关系webpack中css打包的基本打包不使用webpack对less进行转换webpack中less用less-loader的使用处理css时postcss的使用不在webpack内使用在wepack内使用认识webpack和webpack的打包webpack是一个

webpack打包其他资源文件图片打包file-loader的使用css内引入图片资源代码创建元素设置属性依赖图片url-loader的使用webpack5内asset打包方式字体打包-字体文件打包插件的使用CleanWebpackPlugin的使用HtmlWebpackPlugin的使用CopyWebpackPlugin的使用mode和devtool的设置图片打包file-loader的使用css内引入图片资源安装npm install file-loader -DoutputPath:图

BabelBabel的认识和介绍Babe在命令行使用的plugin和presetplugin插件preset预设Babel的原理解析Babel-loader的使用和配置文件Webpack中Vue代码的打包基本打包webpack对SFC文件的支持Global Feature Flags的配置Babel的认识和介绍Babel可以说是一个转换器，可以可以将一种代码转换成另一种代码。如 TypeScript ===> javaScript有些浏览器对某些ES6的语法并不支持，babel可以将其转换成

webpack中devServer的使用为什么要搭建一个服务文件变化重新更新watchwebapck-dev-server的基本使用devServer的contentBase的配置contentBase画图的详细解析devServer模块热替换的应用（HMR）HMR的原理解析devServer的基本配置devServer中proxy的配置webpack中reslove的配置webpack开发环境和生产环境分开为什么要搭建一个服务我们在在开发阶段，若每次我们修改代码，想看一下实际效果，我们都要在命令行里面

VueCLI的讲解VueCLI和脚手架的理解VueCLI的基本使用VueCLI创建项目过程和目录结构VueCLI项目运行和打包进行相关的配置VueCLI cli-service的执行过程VueCLI和脚手架的理解我们配置开发环境不可能从前面发的文章一样，一步一步开始慢慢配置，这回花费很多时间，Vue-cli本质上就是依靠webpack开发的，它已经帮我们配置好了很多很多配置。我们只需要直接开始开发就行了。VueCLI的基本使用VueCLI创建项目过程和目录结构安装Vue CLI：npm inst

Vite的使用浏览器支持esMoudle的弊端Vite的安装和基本使用Vite对CSS、Less、postcss的支持Vite对ts的支持Vite服务器原理Vite对Vue的支持和预打包处理Vite的打包和预览过程Vite依赖ESBuild的学习Vite的脚手架使用浏览器支持esMoudle的弊端script标签需要加入type="module"而且我们引入第三方包，我们只用了其中的一点点代码，但是浏览器还是会请求其相关没有用到的js文件当我们有使用TypeScript，less时，浏览器不能识别

Vue3组件化开发（一）组件的拆分和嵌套组件的CSS作用域问题组件通信（父传子）`props`的数组用法`props`的对象用法非prop的Attribute的传递子组件有根组件包裹禁用Attribute继承子组件无根组件包裹，且有多个元素组件通信（子传父）`emits`的数组写法`emits`的对象写法组件的拆分和嵌套这个我也不知从何写起，就这样拆分，引用。细节补充在引入其他组件时，加后缀。虽然不加后缀，vue-cli会帮我们处理好，但是不能帮我们快速定位到导入的文件内部。ctrl + 鼠标点击进入

Vue3组件化开发（二）非父子组件的通讯`provide`和`inject`的使用最基本使用改进Mitt全局事件总线的使用组件内插槽的使用插槽的基本使用默认插槽具名插槽的使用动态插槽名作用域插槽Vue的渲染作用域作用域插槽的使用独占默认插槽的缩写作用域插槽的使用独占默认插槽的缩写非父子组件的通讯provide和inject的使用最基本使用父组件App.vue 子孙组件 Home.vue父组件实例内属性provideexport default { provide:{ /

Vue3组件化开发（三）动态组件的使用若我们想不依靠vue-router实现tab-bar的功能实现一：v-if v-else-if v-else 实现<template><div class="app"> <button v-for="item in list" :key="item" :class="{current:item === currentItem}" @click

Vue3过渡 & 动画实现Vue3动画基本使用transition组件的原理过渡动画的class命名规则`transition实现`过渡实现动画实现动画和过渡同时存在点击按钮切换案例`transition`的自定义class当动态组件遇到 `transition``transition`结合`Animate.css`使用组件内使用通过Animate.css提供的 className通过动画名字transition的动画的钩子函数`transition`结合`gsap`使用列表过渡`transitio

知识点补充：混入和继承混入`mixin`的使用局部混入全局混入混入的基本规则继承`extends`的使用混入mixin的使用将多个vue文件内共同存在的部分，提取成单个文件，然后运用到需要的地方。在一个js文件内的一个对象内可以写 vue文件内的 data 、methods、components等的属性。局部混入可以在页面内使用混入对象的数据和方法。在mixins内进行引入使用。全局混入在全局进行注册，使创建的每一vue文件内都可以默认自带混入的对象。mixin全局注册混入混入的

Composition API（一）认识`setup`函数Reactive API **的使用**Ref API **的使用****Ref的自动解包**细节**readonly** 的使用传入对象对ref 解包的补充Reactive判断的API前言： 在options API中，存在许许多多的选项，如：data、methods、computed、watch等等。我们要完成某个逻辑，需要到各个部分去书写相关代码，造成逻辑代码非常分散，阅读代码时跳来跳去，可读性非常差，这时 Composition API 来

Vue3的 Composition API （二）toRefs的使用toRef的使用ref其他的APIcustomRef： 自定义refcomputed的使用侦听数据的变化( watchEffect )watchEffect的基本使用watchEffect的停止侦听watchEffect清除副作用在setup内使用refwatchEffect的执行机制改变watchEffect的执行时间侦听数据的变化( watch )watch的基本使用watch侦听多个数据源toRefs的使用在ES6内存在对象的解构

Vue3的Composition API （三 ）setup中的生命周期钩子setup内的provide和inject的使用setup逻辑抽取setup的顶层写法(目前处于实验阶段)setup中的生命周期钩子其实和Options API内的生命周期钩子差不多，只是在前面加了on，并写成了驼峰命名。setup内取消掉了 beforeCreate和created函数但是在setup内，可以多次使用同一个生命周期钩子函数，都是会调用的官网对比图：setup内的provide和inj

Vue3的高级语法补充（一）render 函数和 h 函数JSX的使用render 函数和 h 函数在 单文件组件内 template 内编写的代码并不会直接渲染到页面上，因为存在vue 的一些指令之类的，浏览器是无法识别的，所以vue会先进行解析。之前提到过 VNode 用来描述一个节点的信息。事实上，在template编写的标签，会先编译成VNode，但是是如何操作的呢？期间其实还有一个步骤，先转换成 render函数，render函数执行形成VNode，而 h函数 是用来创建 vnode

Vue3的高级语法补充（二）自定义指令传统实现方式局部指令指令的生命周期钩子全局指令自定义指令修饰符和传值teleport的使用Vue插件自定义指令在vue中可以使用 v-for、v-if、v-show、v-model等等指令，这些都是Vue已经定义好的指令，只需要使用就行了。当然我们自己也可以定义自己的指令。利用官方文档内的案例做演示：input标签挂载完自动获取焦点。传统实现方式局部指令在指令的生命周期函数内，标签获取焦点。在使用是就 v-+ 定义名字 使用指令的生命周期钩子取自官

Vue-Router的使用详解认识路由渲染 & 路由URL的hash & HTML5的History使用 vue-router基本使用其他小补充router-link属性路由懒加载 (常用)动态路由基本使用获取动态路由的值匹配多个参数NotFound路由的嵌套代码实现路由跳转query方式的参数发送接收router-link的补充router-link的插槽router-view的补充router-view的插槽动态添加路由路由守卫认识路由渲染 & 路由后端渲染 & 前

Vue devtools的安装两种方式，主要将第二种，略微记录第一种。第一种：通过Chrome网上应用店 进行Vue devtools的安装第二种：通过Github上 Vue devtools的代码进行安装Vue devtools 仓库地址先将其克隆到本地查看目录解构可知：使用 yarn进行包管理的。有 yarn的直接跳过下一步，没有的可以看下一步。安装yarn。全局安装npm install yarn -g 局部安装： npm install yarn -D演示使用局部安装的

Vuex的状态管理Vuex的基本安装与配置核心模块一：state基本使用mapState的辅助函数核心模块二：getters基本使用mapGetters的辅助函数核心模块三：mutations基本使用mapMutations辅助函数Mutation常量类类型核心模块四：actions基本使用mapActions辅助函数核心模块五：modules基本使用module的命名空间获取模块内getters提交模块内的mutations提交模块内的 actionsmodule的辅助函数从安装到Vuex常见使用和细

Vue知识点的补充：nextTick和historyApiFallbacknextTickhistoryApiFallbacknextTickVue3.x文档解释： 将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。假如有这样的一中情况：点击一个按钮，我们会修改在h2中显示的message；message被修改后，获取h2的高度；用平常的方法方法来写：会发现这和想法是不一致的。使用nextTick解决原因：从浏览器的事件循环来解释，发出

Vue源码学习（一）虚拟DOMVue源码的三大核心模块实现一个Mini Vue渲染模块虚拟DOM优势1、相较于真实DOM，javaScript对虚拟DOM的操作更简单，虚拟DOM是一个JavaScript对象，JS对对象的可以做更多的逻辑操作，效率也更加高效。2、具有跨平台的优势，可以将VNode转换想要的节点，渲染在canvas，Android，iOS等。虚拟DOM的渲染过程Vue源码的三大核心模块三大模块协调工作实现一个Mini Vue渲染模块响应式系统模块入口模块（

Vue源码学习（二）实现一个 Mini Vue渲染系统渲染系统：h函数、mount函数patch函数function patch(oldVNode, newVNode) { if (oldVNode.tag !== newVNode.tag) { const el = oldVNode.el.parentElement; el.removeChild(oldVNode.el); mount(newVNode, el) } else { const el =

setup顶层写法(实验特性 → 新特性)<script setup>(用法)新的SFC功能v-bind可以用在SFC<style>标签中绑定响应式数据的值。两种新特性的协同工作 Demo<template> <div class="home"> <h2>Vue3.2.2新特性</h2> <hr /> <h2>age:{{ age }}</h2> &l