Good Luck

TypeScript判断对象类型的四种方式

docker 安装 nginx 发布Vue项目nginx配置文件、html文件、logs日志文件。

vite是居于ES6模块化的，打包后无法通过file://协议运行（vue cli可以直接本地跑）,也就是说打包后无法直接打开index.html，需要基于静态文件服务器才能跑。不过我们也不存在本地跑的情况，要么线上环境开一个nginx跑，要么基于tomcat等服务器来跑。这里为了方便我直接放到SpringBoot项目，跟后端代码共用一个服务器来运行：1.vite打包2.在SpringBoot项目的资源文件夹resources中新建static文件夹，然后把disk里面的文件复制到static文件夹中3.配

外联样式分为两种：全局外联样式和组件级的外联样式（相当于vue单文件的scope）1.全局外联样式注意：使用的时候“demo”是字符串，不是变量名。2.组件级外联样式css文件名必须是：样式名称.module.css注意：这里使用的时候就是用变量名了，而不是字符串.........

JSX组件CSS样式：

jsx写的403页面：

在css中可以直接绑定js中的变量，改变变量，css做出相应的响应。

1.安装2.使用示例：实时检测鼠标坐标

1.官网教程和示例GitHub - SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.jshttps://github.com/SortableJS/vue.draggable.nextvuedraggablehttps://sortablejs.github.io/vue.draggable.next/#/transition-example 2. 安装（注意注意：不能少了@n

1.代码 2.效果：

1.定义需要绑定的class，并通过!important修饰来提高优先级：2 .定义一个是否生效的开关：3.将class绑定到标签上： 4.触发开关（略）

jsx访问其他jsx

由于博主是后端出身，对layui的十分喜爱，特此引入一下：Layui - Vue 开源前端 UI 框架http://layui-vue.pearadmin.com/zh-CN/guide/introduce1.安装2.注册3.安装插件（如果已经安装过，则跳过此步骤）安装 unplugin-vue-components 和 unplugin-auto-import 插件，插件会自动解析模板中用到的组件，并引入组件和样式。4.配置插件：修改vite.config.js文件5.使用：...

1.安装2.引入3.API：4.使用（全屏切换按钮）

Element Plus 提供了一套常用的图标集合。1.安装2.全局注册3.使用

这个比较简单：一张图片，一个标题，一个回到主页的方法。

1.新建LeftMenu.jsx文件，内容如下： 2.使用： 3.效果：

1.以elementplus的el-menu组件为例：2.所有自定义事件的绑定都以on开头+自定义事件名首字母大写，来进行绑定的，上面的实现如下：

在使用jsx写无限递归菜单的时候，发现el-sub-menu组件的标题，是通过传入具名插槽实现的，找了很久，在快放弃这种写法的时候，发现了这个博客，从中得到了启发：十分感谢此博主！vue3+jsx使用递归组件实现无限级菜单 - 简书评论放链接好像会被吞，demo地址：https://gitee.com/zqw127/vue3-jsx-project[https://gitee.com/zqw127/vu...https://www.jianshu.com/p/73264214a97e实现方法如下：1.我们先

1.安装依赖2.配置插件：在vite.config.js加入jsx配置3.配置编译：修改tsconfig.json或者jsconfig.json，加入以下三项配置4.使用：在components文件夹下新建文件test.jsx，内容如下：然后去HelloWorld.vue中引入并使用效果如下（App.vue中我把Logo去掉了）：...........................

这不是真正的动态注册，后面路径无法动态传参，需要研究一下

1.新建菜单组件NavMenu.vue，从element-plus官网复制一个菜单模板如下： 2.新建导航组件NavHeader.vue，从element-plus官网复制一份模板如下： 3.新建Tab组件NavTab.vue，从vue.draggable的github上复制了一份模板，改造成setup语法糖版本，文档连接如下：vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智

1.body占满全屏，在最外层的入口html中，即index.html中加入CSS样式2。修改入口组件App.vue中的样式为： 3.在components文件夹下新建layout文件夹，新建一个布局主组件LayoutMain.vue，全部使用弹性盒子模型构建，内容如下4.为了开发方便，添加一下路由地址“/layout”，可以方便导航我们的布局主页面：.........

使用css计算即可：比如左边宽度是200px，右边则铺满剩余的宽度：width:calc(100% - 200px)注意注意注意：100%以及后面的200px，二者与减号之间需要有空格

1.设置成绝对定位2.高度是height:100vh3.宽度是width:100vw注意注意注意【vh和vw不要搞错了】！！！

1.安装依赖2.在assets文件夹下，新建css文件夹，在文件夹中新建全局的样式变量：base.less3.配置less，修改vite.config.js文件如下4.使用

1.安装插件2.配置提示vscode中依次点击：文件-首选项-设置-工作区-扩展-path-intellisense对settings.json进行编辑：将path-intellisense.mappings的值设置如下：3.配置打包在项目根目录下，创建jsconfig.json文件，内容如下：4.使用：【注意注意注意：css中背景图片路径要用 ~@】..................

只有真正的改变了store的值，才能触发持久化的存储,博主学习的时候在这里踩了很久的坑，当时只是改变了数据的引用，并没有真正改变pipia里面的值，以为pinia-plugin-persist失效了，看了源码才知道原理是通过$subscribe监听，断点调试发现没有触发才恍然大悟。...

1.根目录新建三个文件：分别对应基本环境（始终加载）、开发环境（npm run dev 加载 ）、生产环境（build加载）【如果env与development冲突，则后者覆盖前者】 【注意：只有以VITE开头的参数才会暴露出去】2.使用：......

1.安装或者2.配置3.使用新建user.js存放访问用户相关的接口，内容如下：

1.安装2.安装 和 这两款插件3.配置自动导入，修改vite.config.js文件4.注册，修改main.js

1.安装2.注册修改vite.config.js3.引入main.js中引入windi.css4.使用（注意：引入windi后，所有原生的样式将会全部失效，如果不想失效，就要去配置一下）Vite 集成 | Windi CSShttps://cn.windicss.org/integrations/vite.html 结合上面的连接文档进行使用。.........

1.安装2.配置新建views文件夹和两个测试页面page1.vue和page2.vue；新建router文件夹，然后再文件夹中新建index.js，内容如下：3.注册修改main.js如下4.修改App.vue如下（将HelloWorld组件换成router-view）文件架构如下：............

1.确认node版本16以上，如果需要多版本node，可以安装nvm随时切换即可。2.找个存放项目的地方，新建一个文件夹，然后在当前文件夹打开cmd窗口（即在地址栏输出cmd回车）： 输入一下命令（将改成你的项目名）构建完成之后启动项目：............

1.下载vue-admin-template：vue-admin-template: vue-admin-template vue轻量级后台管理系统基础模板 在线预览 相关依赖 vue-router iview axios 功能 登录页 一周七天自动切换不同的壁纸（https://gitee.com/mirrors/vue-admin-template2.修改vue.config.js里面的DevServer为：（注意：target改成你们自己的IP端口或域名） 3.注释掉main.js中的模拟配置4

安装vue-element-admin 启动项目

多标签中的拖拽组件

Vue利用layer进行自定义弹窗（依赖jquery和layer，不知道怎么引入的，看我之前的文章）

工具栏组件

左侧菜单组件