本章开始将基于element-ui+vue2+bootstrap4开发后台管理系统
准备工作：
1、安装脚手架
Vue——安装@vue/cli(Vue脚手架)的三种方式_nanchen的博客-CSDN博客
2、使用vue ui安装四个插件：vuex，router，axios，element-ui
调出脚手架的控制台，输入：
vue ui
3、引用bootstrap4
官方网址：bootstrap4
这里可以通过npm或者link的方式进行引用，这里使用link引入
打开脚手架
找到public中的index.html引入以下代码：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" >
可以测试一下是否引入成功
<div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>
效果如下：
4、删除多余的部分
安装完vue-ui中的router时会在views中出现home、about页面以及多余的HelloWord.vue等，对其进行删除
5、封装路由
进行封装
import Vue from 'vue' import VueRouter from 'vue-router' import routes from '../common/config/router.js' Vue.use(VueRouter) const router = new VueRouter({ mode:'history', routes }) export default router
新建一个common文件夹在里面再次新建一个config文件夹，在config文件夹中新建router.js文件
router.js
const routes = [ { path: '/', name: 'layout', /* component: () => import('@/views/layout.vue') */ component:'layout', }, { // 这里就不用写path以及name，下面的函数已经给封装好了 /* component: () => import('@/views/Login.vue') */ component:'Login', }, { path: '*', redirect:{name:'layout'}, } ] function createRoute(arr) { for(let i = 0;i<arr.length;i++){ // 如果对象中没有component那么就返回 if(!arr[i].component)return // 获取到每个对象中的component let val = getValue(arr[i].component) /* 自动生成name和path */ arr[i].name = arr[i].name || val.replace(/\//g, '_') arr[i].path = arr[i].path || `/${val}` /* 简化component */ let componentFun = import(`@/views/${arr[i].component}.vue`) arr[i].component = () => componentFun if(arr[i].children && arr[i].children.length>0){ createRoute(arr[i].children) } } } /* str=login/index 如果路径或nama中最后有index 则不需要写index*/ // 用来封装children中的路径 function getValue(str){ let index = str.lastIndexOf('/') let val = str.substring(index+1,str.length) if(val === 'index'){ return str.substring(index,0) } return str } let getRoutes = function(){ createRoute(routes) return routes } export default getRoutes()
6、布局Login登陆页面，并解决跨域来请求数据
<template> <div class="box"> <div class="wrapper"> <h1>WEB ADMIN</h1> <el-form label-width="auto" :model="form" :rules="rules" ref="form" v-loading="isloading" > <el-form-item label="用户" prop="username"> <el-input v-model="form.username" placeholder="请输入用户名"> <i slot="prefix" class="el-input__icon el-icon-user"></i> </el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" placeholder="请输入密码" show-password > <i slot="prefix" class="el-input__icon el-icon-lock"></i> </el-input> </el-form-item> <el-row> <el-button type="primary" size="mini" @click="login">登录</el-button> <el-button type="success" size="mini" @click="resetForm('form')" >重置</el-button > </el-row> </el-form> </div> </div> </template> <script> export default { name: "Login", data() { return { form: { username: "", password: "", }, isloading: false, rules: { username: [ { required: true, message: "请输入用户名", trigger: "blur", }, { min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur", }, ], password: [ { required: true, message: "请输入密码", trigger: "blur", }, { min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur", }, ], }, }; }, methods: { login() { }); }, }, }; </script> <style scoped="scoped"> .box { width: 100%; height: 100%; position: absolute; bottom: 0; top: 0; overflow: hidden; background-color: #2b4b6b; } .wrapper { width: 500px; height: 320px; background-color: #fff; margin-left: -250px; position: absolute; top: 50%; left: 50%; margin-top: -200px; } .wrapper { padding: 0 30px; } .wrapper h1 { color: #666; text-align: center; padding: 20px 0 30px 0; } </style>
跨域：
module.exports = { lintOnSave: false, devServer: { host: "localhost", port: 8080, // 端口号 https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 proxy: { '/admin': { //代理api target: 'xxxxxxxxxxxx',//服务器api地址 ws: true,// proxy websockets changeOrigin: true,//是否跨域 pathRewrite: { //重写路径 '^/api': '/api' } } } } }
效果如下：
7、SVG
添加波浪动画效果
代码如下：
<div class="svg"> <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto" > <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.8" /> <use xlink:href="#gentle-wave" x="48" y="1" fill="rgba(255,255,255,0.7" /> <use xlink:href="#gentle-wave" x="48" y="2" fill="rgba(255,255,255,0.6)" /> <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" /> <use xlink:href="#gentle-wave" x="48" y="4" fill="rgba(255,255,255,0.4)" /> <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" /> <use xlink:href="#gentle-wave" x="48" y="6" fill="rgba(255,255,255,0.2)" /> <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" /> </g> </svg> </div>
css样式
.waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 15vh; margin-bottom: -7px; /*Fix for safari gap*/ min-height: 200px; max-height: 300px; } .content { position: relative; height: 20vh; text-align: center; background-color: white; } /* Animation */ .parallax > use { animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } .parallax > use:nth-child(5) { animation-delay: -6s; animation-duration: 25s; } .parallax > use:nth-child(6) { animation-delay: -7s; animation-duration: 30s; } .parallax > use:nth-child(7) { animation-delay: -8s; animation-duration: 3s; } @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } /*Shrinking for mobile*/ @media (max-width: 768px) { .waves { height: 40px; min-height: 40px; } .content { height: 30vh; } }
效果：
