Tailwind CSS
配置公共组件
- 在babel.config.js文件中导入cli-plugin-babel
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
};
- 在main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 执行 ElementUI，传入一个配置对象
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
修改/src/components/test.vue
<template>
<div>
<!-- 测试信息一 -->
<p>{{message.test1}}</p>
<!-- 测试信息二 -->
<p>{{message.test2}}</p>
<!-- 发送请求按钮 -->
<button @click="send">发送</button>
<!-- 获取信息请求按钮 -->
<button @click="getTest">接收</button>
</div>
</template>
<script>
export default {
data() {
return {
// 测试的信息，包括信息一和信息二
message: {
test1: 'Hello Shiyanlou!',
test2: 'Hello World!',
},
};
},
methods: {
// 发送请求方法
send() {
this.$http.post('test', this.message).then((res) => {
// 利用三元表达式来完成不同的 message 状态展示信息
res.data.flag
? this.$message.success(res.data.message)
: this.$message.error(res.data.message);
});
},
// 获取数据请求方法
getTest() {
this.$http.get('getTest', this.message).then((res) => {
this.message = res.data;
});
},
},
};
</script>
image.png
配置公共组件
- 解压assets文件夹至src目录下，放置静态图片
- 在src/components/common目录下创建UserNav.vue
- > 表示直接孩子节点， --或者__表示属性
<template>
<div class="user-nav">
<div class="nav-wrapper">
<!-- logo -->
<div class="logo">
<img src="../../assets/img/nav-log.png" alt="前端开发俱乐部" />
</div>
<!-- 导航栏 el-menu 通过 :default-active 属性绑定对应的 activeIndex，从而达到刷新页面时默认激活选项的作用。-->
<el-menu
:default-active="activeIndex"
class="el-menu-left"
mode="horizontal"
>
<!-- 导航栏选项一 -->
<el-menu-item index="1">
<a href="https://www.html-js.cn/front-development___Nycd05pP"
>前端开发</a
>
</el-menu-item>
<!-- 导航栏选项二 -->
<el-menu-item index="2">
<a href="https://www.html-js.cn/document___Ek7skiaw">DoraCMS</a>
</el-menu-item>
<!-- 导航栏选项三 -->
<el-menu-item index="3">
<a href="https://www.html-js.cn/cmscase___SkCL09aCb">案例</a>
</el-menu-item>
<!-- 导航栏选项四 -->
<el-menu-item index="4">
<a href="https://www.html-js.cn/service___HyVhxcjAE">关于我</a>
</el-menu-item>
</el-menu>
<!-- 登录注册导航栏 -->
<el-menu class="el-menu-right" mode="horizontal" router>
<!-- 导航栏选项一 -->
<el-menu-item>
<!-- 搜索框 -->
<div id="search">
<!-- 通过 v-show 来控制搜索框的出现与否 -->
<input
type="text"
v-show="inputFlag"
class="form-control"
placeholder="请输入关键字"
/>
<!-- 使用 ElementUI 的图标 -->
<i
class="el-icon-search fa-search"
@click="inputFlag=!inputFlag"
></i>
</div>
</el-menu-item>
<!-- 导航栏选项二 通过 index 进行跳转，跳转到登录页面 -->
<el-menu-item index="login">登录</el-menu-item>
<!-- 导航栏选项三 通过 index 进行跳转，跳转到注册页面 -->
<el-menu-item index="reg">注册</el-menu-item>
</el-menu>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 初始的 activeIndex
activeIndex: '0',
// 初始的搜索框状态
inputFlag: false,
};
},
};
</script>
<style scoped>
.user-nav {
width: 100%;
background-color: #fff;
border-bottom: solid 1px #e6e6e6;
}
.nav-wrapper {
width: 60%;
height: 60px;
margin: 0 auto;
position: relative;
}
.logo {
display: inner-block;
position: absolute;
top: 5px;
left: 5px;
}
.logo > img {
height: 44px;
}
/* 点击出来的下划线动效残留进行隐藏 */
.el-menu.el-menu--horizontal {
border-bottom: none;
}
.el-menu-left {
position: relative;
left: 250px;
}
.el-menu-right {
position: absolute;
top: 0;
right: 20px;
}
.el-menu--horizontal > .el-menu-item {
color: #000;
}
/* 下拉框字体颜色*/
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
color: #1e80d4;
}
#search {
width: 220px;
height: 100%;
position: relative;
}
#search:active {
color: #000;
border: none;
}
#search input {
width: 155px;
height: 30px;
position: relative;
left: 10px;
padding: 0 10px;
box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.075);
border: none;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
font-family: inherit;
outline: none;
}
#search i {
position: absolute;
top: 22px;
left: 190px;
}
</style>
- 创建公共组件Header.vue
<template>
<div class="nav">
<div class="header">
<img src="../../assets/img/nav-log.png" alt="前端开发俱乐部" />
<div class="search">
<el-input
placeholder="请输入关键字"
v-model="searchData"
class="search_input"
>
</el-input
><el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
</div>
<div class="headerList">
<el-menu :default-active="activeIndex" class="elList" mode="horizontal">
<el-menu-item index="1"><a href="#">网站首页</a></el-menu-item>
<el-menu-item index="2">
<el-dropdown placement="top">
<span class="el-dropdown-link">
<a href="https://www.html-js.cn/front-development___Nycd05pP"
>前端开发</a
>
<i></i>
</span>
<el-dropdown-menu class="option1" slot="dropdown">
<el-dropdown-item>
<a
href="https://www.html-js.cn/front-development/NodeJs___E1lagiaw"
>NodeJs</a
>
</el-dropdown-item>
<el-dropdown-item>
<a
href="https://www.html-js.cn/front-development/Express-Course___V1U2-a9le"
>Express</a
>
</el-dropdown-item>
<el-dropdown-item>
<a
href="https://www.html-js.cn/front-development/Jquery___4JknAqTv"
>Jquery</a
>
</el-dropdown-item>
<el-dropdown-item>
<a
href="https://www.html-js.cn/front-development/others___VyU4rLbt"
>其它</a
>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu-item>
<el-menu-item index="3">
<el-dropdown placement="top">
<span class="el-dropdown-link">
<a href="https://www.html-js.cn/document___Ek7skiaw">DoraCMS</a>
<i></i>
</span>
<el-dropdown-menu class="option2" slot="dropdown">
<el-dropdown-item
><a href="https://www.html-js.cn/document/course___EJFzljaw"
>原创教程</a
></el-dropdown-item
>
<el-dropdown-item
><a href="https://www.html-js.cn/document/soft___4yzPes6w"
>前端软件</a
></el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</el-menu-item>
<el-menu-item index="4"
><a href="https://www.html-js.cn/cmscase___SkCL09aCb"
>案例</a
></el-menu-item
>
<el-menu-item index="5"
><a href="https://www.html-js.cn/service___HyVhxcjAE"
>关于我</a
></el-menu-item
>
<div class="users">
<div class="user-avator">
<img src="../../assets/img/img.jpg" />
</div>
<el-dropdown
class="user-name"
trigger="click"
@command="handleCommand"
>
<span class="el-dropdown-link">
{{username}}
<i class="el-icon-caret-bottom"></i>
</span>
<!-- slot 设置下拉列表 -->
<el-dropdown-menu slot="dropdown">
<a href="https://github.com/doramart/DoraCMS" target="_blank">
<el-dropdown-item>项目仓库</el-dropdown-item>
</a>
<el-dropdown-item divided command="loginout"
>退出登录</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-menu>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '#',
searchData: '',
};
}, // 监控自定义属性
computed: {
username() {
// 从本地存储中获取值
let username = localStorage.getItem('ms_username');
// 对获取到的值进行判断，如果从本地存储能够获取到值，则使用该值，如果不能获取到，则使用 data 中设置的值
return username ? username : this.name;
},
},
methods: {
// 用户名下拉菜单选择事件
handleCommand(command) {
//退出登录事件
if (command == 'loginout') {
// 从本地存储中删除用户名
localStorage.removeItem('ms_username');
// 跳转到登录页面
this.$router.push('/login');
}
},
},
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
body {
font: 15px 'Microsoft YaHei', Arial, Helvetica, sans-serif;
color: #000;
background: #f1f1f1;
font-size: 15px;
}
img {
border: 0;
display: block;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
color: #218af1;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
i {
font-style: normal;
display: block;
}
span {
display: block;
}
.nav {
width: 100%;
}
.header {
width: 60%;
margin: 10px auto;
position: relative;
}
.header > img {
height: 50px;
}
.search {
width: 30%;
height: 80%;
position: absolute;
top: 10%;
right: 0;
}
.search div {
width: 70%;
height: 100%;
display: inline-block;
}
.search_input >>> input.el-input__inner {
border-radius: 10px 0 0 10px;
height: 40px;
}
.search_input >>> input.el-input__inner:focus {
border-color: #dcdfe6;
}
.search button {
width: 25%;
height: 40px;
position: absolute;
top: 0;
border-radius: 0 5px 5px 0;
}
.search >>> i {
position: absolute;
top: 13px;
left: 20px;
}
.search >>> span {
position: absolute;
top: 13px;
left: 35px;
}
.headerList {
width: 100%;
height: 50px;
background-color: #1487f4;
}
.elList {
width: 60%;
height: 100%;
line-height: 50px;
background-color: #1487f4;
margin: auto;
position: relative;
}
.elList li {
width: 100px;
height: 100%;
margin: 0 5px;
line-height: 50px;
display: inline;
text-align: center;
float: left;
font-size: 15px;
display: inline-block;
color: #fff;
}
.el-menu--horizontal > .el-menu-item.is-active,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
background-color: rgb(9, 118, 220);
border-bottom: 2px solid #409eff;
color: #fff;
}
.elList li:nth-child(2) >>> span,
.elList li:nth-child(3) >>> span {
color: #fff;
}
.elList li:nth-child(2) >>> i:after,
.elList li:nth-child(3) >>> i:after {
content: '';
position: absolute;
right: -10px;
top: 24px;
width: 0;
height: 0;
border-width: 4px 4px 0;
border-style: solid;
border-color: #fff transparent transparent;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.elList li:nth-child(2):hover i:after,
.elList li:nth-child(3):hover i:after {
transform: rotate(180deg);
}
.option1,
.option2 {
padding: 5px 0;
width: 100px;
border: none;
border-radius: 0;
top: 108px !important;
background: rgb(9, 118, 220);
z-index: 9;
}
.option1 li,
.option2 li {
width: 100%;
padding: 0;
text-align: center;
}
.option1 li a,
.option2 li a {
color: #fff;
}
.option1 >>> .popper__arrow,
.option2 >>> .popper__arrow {
border-bottom-width: 0 !important;
border-left-width: 0 !important;
border-right-width: 0 !important;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: #1487f4;
}
.option1 >>> .popper__arrow::after,
.option2 >>> .popper__arrow::after {
width: 0 !important;
height: 0 !important;
border-style: none;
border: none;
border-color: rgb(9, 118, 220);
}
.users {
width: 160px;
height: 100%;
display: inline-block;
text-align: center;
line-height: 50px;
float: right;
margin-top: 0px;
}
.user-avator {
displat: inline-block;
margin-left: 20px;
margin-top: 5px;
float: left;
cursor: pointer;
}
.user-avator img {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
}
.user-name {
width: 60px;
display: inline-block;
margin-left: 30px;
float: left;
cursor: pointer;
}
.user-name span {
color: #fff;
width: 80%;
}
.user-name i {
width: 20%;
display: inline-block;
}
.user-name i::before {
color: #fff;
}
</style>
- 创建Footer.vue
<template>
<div class="footer">
<div class="footer_content">
<ul>
<li>
<img
src="https://static.shiyanlou.com/frontend/dist/img/4a4ab3d.svg"
alt="实验楼"
/>
<span>动手做实验，轻松学 IT</span>
</li>
<li>
<img
src="https://static.shiyanlou.com/frontend/dist/img/9f56dbd.png"
alt="微信"
/>
<span>我们的微信</span>
</li>
</ul>
<div class="endNav">
<b class="statement">站点声明：</b>
<span
>1、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。</span
>
<span
>2、本次训练营所使用的均为已经获得授权内容，大家可以在实验环境当中进行使用，不得用于其他商业活动。</span
>
</div>
</div>
</div>
</template>
<style scoped>
span {
display: block;
}
.footer {
width: 100%;
background-color: #333;
position: relative;
padding: 30px 0;
overflow: hidden;
color: #777;
font-size: 14px;
}
.footer::before {
content: '';
background: #34aadc linear-gradient(to left, #1487f4, #5ac8fa, #007aff, #5ac8fa);
height: 10px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.footer_content {
width: 60%;
margin: auto;
overflow: hidden;
}
.footer_content li {
float: left;
margin: 0 10px;
text-align: center;
}
.footer_content li img {
height: 90px;
}
.endNav {
margin-top: 10px;
}
.statement {
font-size: 16px;
color: #34aadc;
margin-bottom: 15px;
display: block;
}
</style>
