Vue中嵌入LayUI框架

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

Auther： 江湖人称平头哥

前言

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

1. 下载LayUI文件
   链接： https://www.layui.com/
   
2. 将解压文件放入Vue项目的static目录
   
3. Vue的 index.html中引入 LayUI 的 css 和 js

 <link type="text/css" rel="stylesheet" href="./static/layui/css/layui.css"/>
 <script type="text/javascript" src="./static/layui/layui.js"></script>

4. 新建Vue组件（AddNews.vue），引入 LayUI 组件代码如下：

<template>
 <div class="main" >
   <form class="layui-form" action>
     <div class="layui-form-item">
       <label class="layui-form-label">新闻标题</label>
       <div class="layui-input-block">
         <input
           type="text"
           name="news_title"
           required
           lay-verify="required"
           placeholder="请输入新闻标题"
           autocomplete="off"
           class="layui-input"
         />
       </div>
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">新闻副标题</label>
       <div class="layui-input-block">
         <input
           type="text"
           name="news_subhead"
           required
           lay-verify="required"
           placeholder="请输入新闻副标题"
           autocomplete="off"
           class="layui-input"
         />
       </div>
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">作者</label>
       <div class="layui-input-block">
         <input
           type="text"
           name="auther"
           required
           lay-verify="required"
           placeholder="请输入作者"
           autocomplete="off"
           class="layui-input"
         />
       </div>
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">关键字</label>
       <div class="layui-input-block">
         <input
           type="text"
           name="tags"
           required
           lay-verify="required"
           placeholder="请输入关键字"
           autocomplete="off"
           class="layui-input"
         />
       </div>
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">导读</label>
       <div class="layui-input-block">
         <input
           type="text"
           name="navi_content"
           required
           lay-verify="required"
           placeholder="请输入导读"
           autocomplete="off"
           class="layui-input"
         />
       </div>
     </div>

     <div class="layui-form-item">
       <label class="layui-form-label">新闻类型</label>
       <div class="layui-input-block">
         <select name="city" lay-verify="required">
           <option value></option>
           <option value="0">国内新闻</option>
           <option value="1">国际新闻</option>
           <option value="2">案例新闻</option>
         </select>
       </div>
     </div>

     <div class="layui-form-item">
       <label class="layui-form-label">开启评论</label>
       <div class="layui-input-block">
         <input type="checkbox" name="switch" lay-skin="switch" />
       </div>
     </div>

     <div class="layui-form-item">
       <label class="layui-form-label">是否置顶</label>
       <div class="layui-input-block">
         <input type="radio" name="is_top" value="1" title="是" checked />
         <input type="radio" name="is_top" value="0" title="否" />
       </div>
     </div>

     <div class="layui-form-item layui-form-text">
       <label class="layui-form-label">封面上传</label>
       <button type="button" class="layui-btn" id="test1">
         <i class="layui-icon">&#xe67c;</i>图片上传
       </button>
     </div>

     <div class="layui-form-item layui-form-text">
       <label class="layui-form-label">新闻内容</label>
       <div class="layui-input-block">
         <textarea name="content" placeholder="请输入新闻内容" class="layui-textarea"></textarea>
       </div>
     </div>

     <div class="layui-form-item">
       <div class="layui-input-block">
         <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
         <button type="reset" class="layui-btn layui-btn-primary">重置</button>
       </div>
     </div>
   </form>
 </div>
</template>

<script>
</script>

<style>
.main {
 width: 50%;
 margin: auto;
}
</style>

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

5. Vue 的 index.js中引入新建的 AddNews.vue 页面，并设置为项目首页
   

6. App.vue 中引入LayUI 表单和图片上传的js （LayUI 官方文档可查看）

7. 完成啦，最终效果：
   （注：图片上传的实现需搭配后端完成，此处仅为 LayUI 效果展示）
   

结束

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