vue实战-vux/vue-awesome-swiper/drawer/动态改title/webpack过滤代码

本文链接：https://blog.youkuaiyun.com/songhsia/article/details/89227737

2018.11.12
重构第一天

1、vue如何使用vux
1.项目里安装vux,vux-loader,less-loader,yaml-loader
  npm install vux --save
  npm install vux-loader --save-dev
  npm install less less-loader --save-dev
npm install yaml-loader --save-dev
2.webpack.base.conf.js修改配置，在里添加less

resolve: {
extensions: ['.js', '.vue', '.json','.less'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},

3.build/webpack.base.conf.js文件里将原来的module.exports的代码赋值给一个新的变量webpackConfig

const webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},

最后加入

module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})

2018.11.13
重构第二天

1、使用vue-awesome-swiper，做轮播，遇到了一个大坑

import 'swiper/dist/css/swiper.min.css'
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);
import { swiper, swiperSlide } from 'vue-awesome-swiper';
swiperOption: {
notNextTick: true,
direction: 'horizontal',
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true,
speed: 1000,
autoplay: 2000,
},
components:{
swiper,
swiperSlide,
}

这是源码，问题在哪？！
查了很久都查不出来，最后把autoplay: 2000改为了autoplay:true，成功了。。。
2、在多个vue方法和组件的情况下，this不一定指代的是当前vue环境，可能指代我们目前用的组件，那么如何使得指代vue环境的变量能一直存在呢，可以这么解决：
在script中首先定义一个变量：var that= {};
然后在创建实例前赋值：
beforeCreate(){
that = this; //将当前this赋值给that对象
},
再取that就是vue环境了

2018.11.22
重构第三天
今天遇到一个需求：列表页跳转详情页，再返回列表页时一切不变，不刷新，使用了keep-alive
写法如下：

  <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>

router的index.js

  routes: [
    {
      path: '/',
      name: 'index',
      component: index,
      meta: {
        keepAlive: true
      }
    },
    {
      path:'/detail/:ID/:AddDate/:ParentId',
      name:'detail',
      component:detail,
      meta: {
        keepAlive: false
      }
    }
  ]

keepAlive为true时，缓存，false，不缓存
然后就可以了。。。vue2.0+加入了exclude和include，设置组件name值，这个方法我用了但是没用。。。就不多说了

2018.11.27
今天要写的是vue的键盘事件，当点击回车按钮，vue如何判断呢？
html:

<input type="text" name="" id="m-search" value="" placeholder="搜索信息" @keyup="search($event)"/>

script:

search:function(e){
    if(e.keyCode == 13){
        console.log('回车')
    }
}

ok
2018.11.28
今天项目基本上都写完了，主要就是解决bug.
1.之前在使用vux的drawer组件时遇到了一个问题，由于drawer是最外层元素，router-view作为其子元素，而在使用时，drawer这层最外元素上添加了一个属性:transform,然后出现了一个令人震惊的现象，其下所有fixed全部失效了，查了一下，果然父元素有transform，子元素fixed就会失效，但我项目里必须要实现头部的定位，怎么办，我首先使用了一种最容易想到的办法：使header和drawer脱离父子关系，写为并行，结果出现阴影时header就不在阴影里了，并且使用push时，header的宽度多了左边侧边栏的100px，变成了375+100=475,由于header变长，header内部的居中就向右移动了，问题很大，于是最终我就舍弃了这种方法，经过几次思考，我使用了这样的方法：由于vux组件里有sticky这个组件，粘性布局，于是我在header外部包了一个sticky，offset设为0，让header一直黏在top:0这个地方，解决了问题。
2.前几天遇到一个问题：页面中使用了两个swiper(vue-awesome-swiper),写了连个option，都有loop:true，但奇怪的是，一个可以循环，一个不行，对比发现，可以循环那个是data中就定义好的数据，即一开始就有数据，另一个则是ajax请求回来的，查了一下发现可能是因为数据还没回来就已经开始定义了swiper，于是，在swiper上加了v-if='showSwiper',data初始化的时候把showSwiper设为false,在数据回来后再把showSwiper设为true,就可以了。
3.返回上一页：

@click='$router.back(-1)'

2018.12.04
今天遇到几个神奇的问题，记一下：
1.使用百度分享插件，却发现必须要刷新一次才能用，网上百度了一下，说要在beforeCreate里加上window._bd_share_main = ""

beforeCreate(){
      that = this;
       window._bd_share_main = ""
  },

然而并没用
解决办法：
在mount里加了一个延迟

mounted:function(){
      setTimeout(()=>{
           that.setShare()
       },100)
    },
  methods:{
    setShare(){
    window._bd_share_config={
    "common":{
    "bdSnsKey":{},
    "bdText":"",
    "bdMini":"2",
    "bdPic":"",
    "bdStyle":"0",
    "bdSize":"32"
    },
    "share":{},
    "selectShare":{
    "bdContainerClass":null,
    "bdSelectMiniList":["sqq","qzone","tsina"]
    }
    };
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
    document.body.appendChild(s);
    },
}

2.打包上线：
发布时输入npm run build,发现一片空白
解决方法：1.放在http服务器下，2.需要改一下config里的index.js
将build下的assetsPublicPath: '/',改为assetsPublicPath: './',即加一个点，然后再次npm run build，我将代码放在了nginx下面，通过localhost:70/XXX/XXX/index.html访问成功
3.上线后发现两行文本溢出变省略号的效果没了，打开调试发现页面上看不到-webkit-box-orient: vertical;这行代码了，查了一下才发现，原来webpack把代码过滤了
解决方法：

/*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */

前后加两行代码就可以了

2018年12月11日

前两天给公司写了一个小工具，因为就一个页面所以写在了项目里，但这个页面的title与项目里其他页面的title都不一样，而现在的title是直接写在index.html里的，查了一下，决定使用vue-wechat-title根据路由去改变不同title

下载vue-wechat-title：

npm install vue-wechat-title --save

在main.js中引入并全局使用插件：

import VueWechatTitle from 'vue-wechat-title';
Vue.use(VueWechatTitle)

在router下的index.js中使用：

routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      meta: {
        keepAlive: false,
        title:'首页title'
      }
    },
    {
      path: '/index',
      name: 'index',
      component: index,
      meta: {
        keepAlive: true,
        title:'index页面title'
      }
    }
  ]

相应写上title就可以了