项目中踩坑

gridsome 项目踩坑

• 之前用 gridsome create project 时，第三步需要等很久的时间，先将其终止了，
• 现在进入到刚才创建的项目，用 cnpm install 用不了1分钟就好了。
• 安装 cnpm : npm install -g cnpm --registry=https://registry.npm.taobao.org 没有权限就在前面加sudo 进行安装。

在gridsome项目中要用到轮播图插件，所以我下载了 vue-awesome-swiper
同时也按照官网步骤去进行正常引入，可以运行，并且可以实现效果，

但是！！！！

在gridsome build 打包是报错了，

错误如下：这该如何是好，找不到解决方法：

🎃 在同一个页面中使用多个swiper ，结果造成样式乱，不能正常进行渲染
解决办法如下：给每一个option 一个不一样的名字，并且修改swiper中的前后箭头、以及小圆点的class名，避免重复。

报错window 未定义？ why??? 一脸懵

下面是 报错之前 引入的位置

解决办法如下：

在main.js 中引入：

export default function (Vue, { head, router, isServer, appOptions }) {

if (typeof window !== 'undefined') {
    const vueSwiper = require('vue-awesome-swiper');
    Vue.use(vueSwiper);
  }
  
})

在gridsome中使用md文档时：

先安装插件,其次在vue.config.js 中进行配置

如果在md 中引入图片，并且设定宽度，注意宽度不能超过container的宽度，否则报错，页面样式乱。

如果要想在gridsome 中的template中直接编写页面，那么在里面写如下内容：?

就gridsome项目来说，本地模拟服务器进行线上测试

• www-3.0目录下有一个auth-server
• auth-server下有一个.env.example的檔案
• 先复制一份，然后rename ，改为.env
• ·# App Environment
  
  DB_HOST=‘13.231.233.105’.

改为自己的ip地址 DB_HOST=‘172.18.1.154’

• 接下來在auth-server下 执行 yarn

這個步驟是安裝需要的node_modules，所以後續如果沒有需要安裝新的套件，就可以不用再執行

• 回到www-v3.0目錄下，执行yarn build

這會執行兩個步驟，先將gridsome 編譯，然後將編譯完成的部分copy到auth-server目錄下

• 再到auth-server下，执行yarn start:dev

將auth-server开启，浏览器 輸入http://127.0.0.1:8848/home/ 就可以進入最后编译完成的页面

样式不兼容问题？？？

• 在gridsome中用到了Bulma样式以及Bulma中的Buefy组件库，其中Bulma的样式和Gridsome中的样式不兼容，在本地测试时有可能是对的，但是打包部署到服务器时，就会没有样式，产生样式不兼容的问题，造成很多麻烦，所以我在gridsome中写了public样式，这样权重会大于其他两个，所以打包后部署后样式成功渲染。

gridsome项目创建流程

• step1 安装 click😶
  在我实际测试中，自己安装@gridsome/cli 后搭建的项目是不能进行很多操作的，不知道为啥。
• step 2 所以，我每次都会拉取官网的项目（gridsome.org）去github 中去搜索进行git clone …
• 在其基础上进行更改。

vue中踩坑

点击事件切换图片的 src

⬇️⬇️⬇️⬇️做这样一个变化：

代码：

<div class="exit" v-if="!isLogin">
  <div class="exit-cont">
    <!-- 动态获取登录的用户名 -->
    <p>hello user</p> 
    <p><img @click="changePic"  :src="home_url" alt=""></p>
  </div>
  <div v-if="showExit" class="loginOut">
    <p class="loginOut-tit"  @click="logout">退出</p>
  </div>
</div>

methods中的方法：

changePic(){
console.log(3333);
  this.showExit = !this.showExit;
  if(this.showExit == true){
    this.home_url = home_url
  }else{
    this.home_url = home
  }
},

记得导入图片：

import home from '../../../static/images/Home/下滑icon-未选中@2x.png'
import home_url from '../../../static/images/Home/下滑icon-选中@2x.png'

data() {
  return {
    home_url: home,
  }
},

动态class:

<ul class="tab">
 <li v-for="(p,index) in tabData1" :key="index" :class="{tabId:index == nowTab}" @click="changeTab(index)"><p></p>{{p}}</li>
</ul>

简易标签云的实现：
效果：

<!-- 标签云 -->
<ul id="wrap" class="industry-list">
   <li v-for="(p,index) in industryData" :key="index" href="#" class="as" :style="{fontSize: p.fontSize+ 'px'}" :class="{industryAct:index == IndustyIndex}" @mouseover="changeColor(index)">
     {{p.title}}
   </li>
 </ul>

在data中写：

industryData:[
        {
          title:"保险业",
          fontSize:""
        },
        {
          title:"保单处理",
          fontSize:""
        },
        {
          title:"信函处理",
          fontSize:""
        },
        {
          title:"产品说明书管理",
          fontSize:""
        },
        ...
      ],

biaoqian(){
var obox = document.getElementById("wrap");
  var obj = document.getElementById("wrap").children;
  //随机方法
  function random(start,stop){
      return parseInt(Math.random()*(stop-start)+start);
  }
  //循环
    let arrFont = [];
    for (let i=0;i< this.industryData.length;i++) {
    arrFont.push(random(16,24))
      for(let j=0;j<arrFont.length;j++){
      Object.assign(this.industryData[i],{
          fontSize:arrFont[j]
        })
      }
    }
}

vue 实现头部存在，但是要让头部下面的一个div在滚动的时候固定定位(动态绑定class)

• 效果如下：
• 代码：

<div class="bread" :class="searchBar == true ? 'searchBar' :''">
	<nav class="breadcrumb is-small" aria-label="breadcrumbs">
	  <ul>
	    <li class="primary-color"><a href="/home/">Home</a></li>
	    <li class="second-color"><a href="/about/">About Us</a></li>
	    <li class="is-active"><a href="#" aria-current="page">公司介绍</a></li>
	  </ul>
	</nav>
</div>

data(){
 return {
  searchBar:false
  }
},
mounted () {
    // 事件监听滚动条
    window.addEventListener('scroll', this.watchScroll);
    console.log(this.subtitles);
  },
  methods:{
    watchScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        //  当滚动超过 60 时，实现吸顶效果
        if (scrollTop > 60) {
            this.searchBar = true
        } else {
            this.searchBar = false
        }
    }
  }

• css样式：

.searchBar {
    position:fixed;
    background-color:#fff;
    top:60px; 
    /* // 60px是导航标题头的高度 */
    z-index:999;
}