直接上代碼
template-(Guide.vue)
```javascript
<template>
? ? <div>
? ? ? ? <!-- 新手指引 -->
? ? ? ? <div id="mask"></div>
? ? ? ? <div id="searchTip">
? ? ? ? ? ? <div class="stepA">
? ? ? ? ? ? ? ? <el-button type="primary" size="small" class="close" @click="close">我知道了</el-button>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
</template>
<script>
? ? export default {
? ? ? ? name: 'RpGuide',
? ? ? ? methods: {
? ? ? ? ? ? close() {
? ? ? ? ? ? ? ? this.$cookie.set('guide', 1 ,{domain:'hanmaker.com'})
? ? ? ? ? ? ? ? this.$destroy(true);
? ? ? ? ? ? ? ? this.$el.parentNode.removeChild(this.$el);
? ? ? ? ? ? },
? ? ? ? },
? ? }
</script>
<style scoped>
/* 新手指引 */
#mask{
? ? height:100%;
? ? width:100%;
? ? background:#000;
? ? -webkit-backdrop-filter: blur(10px);
? ? backdrop-filter: blur(10px);
? ? opacity:.5;
? ? filter:alpha(opacity=50);
? ? position:absolute;
? ? left:0;
? ? top:0;
? ? display:block;
? ? z-index: 99999;
}
#searchTip{
? ? width:100%;
? ? height:100%;
? ? position: absolute;
? ? left:50%;
? ? top: 0;
? ? margin-left: -50%;
? ? display:block;
? ? z-index: 99999;
}
#searchTip div{
? ? position:absolute;
? ? display:block;
}
#searchTip div button{
? ? position:absolute;
? ? overflow:hidden;
}
.stepA{
? ? background-image:url(//pic2.hanmaker.com/common/images/guide.png);
? ? background-repeat: no-repeat;
? ? height:625px;
? ? width:946px;
? ? top:0px;
? ? left:32px;
? ? display:block;
}
.stepA button{
? ? top: 580px;
? ? left: 850px;
}
</style>
```
命令行輸入：npm install vue-cookie
man.js
```javascript
import VueCookie from 'vue-cookie';
Vue.use(VueCookie);
```
根目錄文件，我這里是app.vue（home.vue）
```javascript
import Vue from 'vue';
import Guide from '@/components/Guide/Guide'
mounted(){
? ? let guide = this.$cookie.get('guide');
? ? if(guide != 1){
? ? ? ? let MessageConstructor = Vue.extend(Guide);
? ? ? ? let instance = new MessageConstructor();
? ? ? ? instance.$mount();
? ? ? ? document.body.appendChild(instance.$el);
? ? }
},
```
