Vue中嵌入LayUI框架

#Vue中嵌入LayUI框架| 来源: 网络整理| 查看: 265

大家好，又见面了，我是你们的朋友全栈君。

Auther：江湖人称平头哥

前言

Vue.js是一套构建用户界面的渐进式框架。Vue采用自底向上增量开发的设计。Vue的核心库只是关注图层。容易学习和整合其他项目。 LayUI是开源的模块化前端UI框架，其中提供了丰富的内置模块，都可以通过模块化的方式按需加载，可作为PC网页端后台管理系统和前台界面的速成开发。

下载LayUI文件链接： https://www.layui.com/ 将解压文件放入Vue项目的static目录 Vue的 index.html中引入 LayUI 的 css 和 js 新建Vue组件（AddNews.vue），引入 LayUI 组件代码如下：新闻标题新闻副标题作者关键字导读新闻类型国内新闻国际新闻案例新闻开启评论是否置顶封面上传 图片上传新闻内容立即提交重置 .main { width: 50%; margin: auto; }

加点小样式，不然真的太丑了

Vue 的 index.js中引入新建的 AddNews.vue 页面，并设置为项目首页 App.vue 中引入LayUI 表单和图片上传的js （LayUI 官方文档可查看）完成啦，最终效果：（注：图片上传的实现需搭配后端完成，此处仅为 LayUI 效果展示）结束

刚开始学vue的小白，如有问题，欢迎指正，共同进步！

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/152806.html原文链接：https://javaforall.cn

【本文地址】

公司简介

联系我们