Good Luck

Vue3 第十篇Plus：使用iconfont阿里巴巴矢量图标库

第一步：vue项目打包成dist。npm run build第二步：构建Dockerfile# 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了FROM nginx# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面COPY dist/ /usr/share/nginx/html/第三步：安装nginxdocker pull nginxdocker run --name nginx -d -p 4030:8.

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

使用场景选择框级联，父级选择框选中后，触发子级去查询下拉列表。

代码】Vue3第三十七篇defineProps、defineEmits、defineExpose、provide/inject。

xe-utils 函数库、工具类xe-utils 函数库、工具类，vxe-table 表格解决方案.https://vxetable.cn/xe-utils/#/GitHub - x-extends/xe-utils: javascript 函数库、工具类javascript 函数库、工具类. Contribute to x-extends/xe-utils development by creating an account on GitHub.https://github.com/x-extends/x

一定要在onMounted里面去获取元素，因为在挂载之前元素还没有渲染出来，是拿不到元素的。

1.依赖：（已安装则跳过）2.配置插件vite.config.js3.构建API在根目录下新建mock文件夹，并在其中新建index.js文件，模拟一个API请求：4.使用

JSX:CSS:

JSX:CSS:

JSX:CSS

获取元素的方式分为两种1.通过选择器直接获取dom元素。 注意：这里无法使用class选择器。因为jsx在编译的过程中，会为class名称加上哈希后缀，也就是说，无法直接通过class选择器来获取元素。2.通过ref标记来获取元素。定义变量将变量通过ref绑定到dom元素上 这样就可以操作dom元素了...

JSX:CSS:

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

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

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

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.我们先

由于博主是后端出身，对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.配置插件：在vite.config.js加入jsx配置3.配置编译：修改tsconfig.json或者jsconfig.json，加入以下三项配置4.使用：在components文件夹下新建文件test.jsx，内容如下：然后去HelloWorld.vue中引入并使用效果如下（App.vue中我把Logo去掉了）：...........................

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

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

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

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

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

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.注册3.使用新建store文件夹，新建user.js文件，内容如下4.page1.vue中使用

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