![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3
Vue3+Vite+Pinia+ElementPlus+...JSX
致力于纯JSX的开发
文子阳
GOOD LUCK
展开
-
Vue3 第十篇Plus:使用iconfont阿里巴巴矢量图标库
Vue3 第十篇Plus:使用iconfont阿里巴巴矢量图标库原创 2023-02-18 21:31:40 · 8424 阅读 · 1 评论 -
docker 部署Vue项目
第一步: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.原创 2021-07-28 08:51:44 · 102109 阅读 · 4 评论 -
docker 安装 nginx 发布Vue项目
docker 安装 nginx 发布Vue项目nginx配置文件、html文件、logs日志文件。原创 2022-08-02 09:57:47 · 12844 阅读 · 2 评论 -
Vue3 第三十八篇:监听器watch
使用场景选择框级联,父级选择框选中后,触发子级去查询下拉列表。原创 2022-07-19 15:45:41 · 392 阅读 · 0 评论 -
Vue3 第三十七篇:defineProps、defineEmits、defineExpose、provide / inject
代码】Vue3第三十七篇defineProps、defineEmits、defineExpose、provide/inject。原创 2022-07-16 10:09:27 · 1172 阅读 · 0 评论 -
Vue3 第三十六篇:集成xe-utils
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原创 2022-07-14 10:40:34 · 1412 阅读 · 0 评论 -
Vue3 第三十六篇:直接操作dom元素
一定要在onMounted里面去获取元素,因为在挂载之前元素还没有渲染出来,是拿不到元素的。原创 2022-07-11 15:01:59 · 1843 阅读 · 0 评论 -
Vue3 第三十五篇:集成mockjs
1.依赖:(已安装则跳过)2.配置插件vite.config.js3.构建API在根目录下新建mock文件夹,并在其中新建index.js文件,模拟一个API请求:4.使用原创 2022-07-03 15:17:48 · 487 阅读 · 0 评论 -
Vue3 第三十四篇:常用组件:Head导航
JSX:CSS:原创 2022-06-29 17:43:41 · 962 阅读 · 0 评论 -
Vue3 第三十三篇:常用组件:面包屑
JSX:CSS:原创 2022-06-29 15:56:42 · 646 阅读 · 0 评论 -
Vue3 第三十二篇:常用组件:Tab栏
JSX:CSS原创 2022-06-29 15:40:09 · 987 阅读 · 0 评论 -
Vue3 第三十二篇:JSX中直接操作dom元素
获取元素的方式分为两种1.通过选择器直接获取dom元素。 注意:这里无法使用class选择器。因为jsx在编译的过程中,会为class名称加上哈希后缀,也就是说,无法直接通过class选择器来获取元素。2.通过ref标记来获取元素。定义变量将变量通过ref绑定到dom元素上 这样就可以操作dom元素了...原创 2022-06-29 15:28:46 · 1665 阅读 · 0 评论 -
Vue3 第三十一篇:常用组件:右键菜单
JSX:CSS:原创 2022-06-29 12:10:05 · 2138 阅读 · 0 评论 -
Vue3 第三十篇:vite打包后放到SpringBoot中运行
vite是居于ES6模块化的,打包后无法通过file://协议运行(vue cli可以直接本地跑),也就是说打包后无法直接打开index.html,需要基于静态文件服务器才能跑。不过我们也不存在本地跑的情况,要么线上环境开一个nginx跑,要么基于tomcat等服务器来跑。这里为了方便我直接放到SpringBoot项目,跟后端代码共用一个服务器来运行:1.vite打包2.在SpringBoot项目的资源文件夹resources中新建static文件夹,然后把disk里面的文件复制到static文件夹中3.配原创 2022-06-27 11:38:37 · 4238 阅读 · 3 评论 -
Vue3 第二十九篇:JSX中引入外联css文件
外联样式分为两种:全局外联样式和组件级的外联样式(相当于vue单文件的scope)1.全局外联样式注意:使用的时候“demo”是字符串,不是变量名。2.组件级外联样式css文件名必须是:样式名称.module.css注意:这里使用的时候就是用变量名了,而不是字符串.........原创 2022-06-27 09:54:40 · 2506 阅读 · 0 评论 -
Vue3 第二十八篇:常用页面:登录页
JSX组件CSS样式:原创 2022-06-25 23:45:29 · 3582 阅读 · 0 评论 -
Vue3 第二十七篇:常用页面:403、404、500等
jsx写的403页面:原创 2022-06-25 21:24:26 · 1539 阅读 · 0 评论 -
Vue3 第二十六篇:响应式Css
在css中可以直接绑定js中的变量,改变变量,css做出相应的响应。原创 2022-06-25 19:44:16 · 627 阅读 · 0 评论 -
Vue3 第二十五篇:VueUse
1.安装2.使用示例:实时检测鼠标坐标原创 2022-06-24 14:44:55 · 413 阅读 · 0 评论 -
Vue3 第二十四篇:集成vue.draggable
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原创 2022-06-24 10:51:26 · 870 阅读 · 0 评论 -
Vue3 第二十三篇:jsx工具栏组件
1.代码 2.效果:原创 2022-06-23 22:00:54 · 684 阅读 · 0 评论 -
Vue3 第二十二篇:双向绑定样式style
1.定义需要绑定的class,并通过!important修饰来提高优先级:2 .定义一个是否生效的开关:3.将class绑定到标签上: 4.触发开关(略)原创 2022-06-23 10:10:06 · 827 阅读 · 0 评论 -
Vue3 第二十一篇:jsx如何修改另一个jsx中的变量
jsx访问其他jsx原创 2022-06-23 09:52:58 · 329 阅读 · 0 评论 -
Vue3 第十九篇:JSX全屏切换
1.安装2.引入3.API:4.使用(全屏切换按钮)原创 2022-06-22 21:13:50 · 352 阅读 · 0 评论 -
Vue3 第十七篇:使用JSX轻松实现Logo组件
这个比较简单:一张图片,一个标题,一个回到主页的方法。原创 2022-06-22 10:27:05 · 393 阅读 · 0 评论 -
Vue3 第十六篇:常用组件:无限级菜单组件
1.新建LeftMenu.jsx文件,内容如下: 2.使用: 3.效果:原创 2022-06-21 22:22:47 · 1976 阅读 · 0 评论 -
Vue3 第十五篇:JSX绑定自定义事件,绑定多个方法函数
1.以elementplus的el-menu组件为例:2.所有自定义事件的绑定都以on开头+自定义事件名首字母大写,来进行绑定的,上面的实现如下:原创 2022-06-21 22:13:34 · 3703 阅读 · 1 评论 -
Vue3 第十四篇:JSX传入elementplus组件插槽
在使用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.我们先原创 2022-06-21 21:37:36 · 3579 阅读 · 1 评论 -
Vue3 第十三篇:引入Layui-vue框架
由于博主是后端出身,对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.使用:...原创 2022-06-22 21:41:09 · 5059 阅读 · 0 评论 -
Vue3 第十二篇:动态组件和异步注册组件
这不是真正的动态注册,后面路径无法动态传参,需要研究一下原创 2022-06-17 23:45:51 · 1703 阅读 · 1 评论 -
Vue3 第十一篇:集成JSX
1.安装依赖2.配置插件:在vite.config.js加入jsx配置3.配置编译:修改tsconfig.json或者jsconfig.json,加入以下三项配置4.使用:在components文件夹下新建文件test.jsx,内容如下:然后去HelloWorld.vue中引入并使用效果如下(App.vue中我把Logo去掉了):...........................原创 2022-06-20 10:57:14 · 572 阅读 · 0 评论 -
Vue3 第十篇:使用ElementPlus图标
Element Plus 提供了一套常用的图标集合。1.安装2.全局注册3.使用原创 2022-06-22 13:47:31 · 3499 阅读 · 0 评论 -
Vue3第九篇:集成less
1.安装依赖2.在assets文件夹下,新建css文件夹,在文件夹中新建全局的样式变量:base.less3.配置less,修改vite.config.js文件如下4.使用原创 2022-06-17 13:19:58 · 858 阅读 · 0 评论 -
Vue3第八篇:集成axios
1.安装或者2.配置3.使用新建user.js存放访问用户相关的接口,内容如下:原创 2022-06-14 12:06:10 · 1561 阅读 · 0 评论 -
Vue3第七篇:Vite多环境配置
1.根目录新建三个文件:分别对应基本环境(始终加载)、开发环境(npm run dev 加载 )、生产环境(build加载)【如果env与development冲突,则后者覆盖前者】 【注意:只有以VITE开头的参数才会暴露出去】2.使用:......原创 2022-06-14 14:44:52 · 6118 阅读 · 1 评论 -
Vue3第六篇:配置@根路径,替代../../
1.安装插件2.配置提示vscode中依次点击:文件-首选项-设置-工作区-扩展-path-intellisense对settings.json进行编辑:将path-intellisense.mappings的值设置如下:3.配置打包在项目根目录下,创建jsconfig.json文件,内容如下:4.使用:【注意注意注意:css中背景图片路径要用 ~@】..................原创 2022-06-17 09:41:54 · 9408 阅读 · 3 评论 -
Vue3第五篇:集成Element Plus
1.安装2.安装 和 这两款插件3.配置自动导入,修改vite.config.js文件4.注册,修改main.js原创 2022-06-13 14:10:24 · 773 阅读 · 0 评论 -
Vue3第四篇:集成Windi.css
1.安装2.注册修改vite.config.js3.引入main.js中引入windi.css4.使用(注意:引入windi后,所有原生的样式将会全部失效,如果不想失效,就要去配置一下)Vite 集成 | Windi CSShttps://cn.windicss.org/integrations/vite.html 结合上面的连接文档进行使用。.........原创 2022-06-13 13:41:02 · 3061 阅读 · 0 评论 -
Vue3第三篇:集成pinia
1.安装2.注册3.使用新建store文件夹,新建user.js文件,内容如下4.page1.vue中使用原创 2022-06-13 11:17:54 · 548 阅读 · 0 评论 -
Vue3第二篇:集成vue-router
1.安装2.配置新建views文件夹和两个测试页面page1.vue和page2.vue;新建router文件夹,然后再文件夹中新建index.js,内容如下:3.注册修改main.js如下4.修改App.vue如下(将HelloWorld组件换成router-view)文件架构如下:............原创 2022-06-13 10:14:41 · 697 阅读 · 0 评论