项目中踩坑
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;
}