一套博客系统 项目代码：https://github.com/linguowei/myblog.git

//媒体匹配
let result = window.matchMedia('(min-width: 768px)')
if(result.matches)return;

highlight.js" ：高亮文本
"marked" : 编译markdown语法

directives: { //自定义指令
    compiledMarkdown: {
        bind: function(el){
            el.innerHTML = marked(el.innerText)
            el.innerHTML = el.innerHTML.replace(/[^\u4e00-\u9fa5]/gi,'') 

            if(el.querySelector('pre')){
                el.querySelector('pre').style.display = "none"
            }
            if(el.querySelector('blockquote')){
                el.querySelector('blockquote').style.display = "none"
            }
        }
    }
},

@media screen and (min-width: 768px){ //PC

@media screen and (max-width: 768px){ //移动端，手机端

Vue2 实战：模仿卖座电影

https://github.com/ChuckCZC/vue-demo-maizuo.git

vue-awesome-swiper

import {mapGetters} from 'vuex' //mapGetters

transition transition-group

漂亮的loading效果

基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》

https://github.com/hzzly/xyy-vue.git

{
  path: '*',
  name: 'notfound',
  component: NotFound
}

import * as filters from './util/filter'

Object.keys(filters).forEach(k => Vue.filter(k, filters[k])) //注册过滤器

//渐变动效
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.1s ease-in;
  opacity: 1;
}
.slide-left-enter,
.slide-left-leave-active {
  opacity: 0;
}

@function px2rem($px, $base-font-size: 75px) {
  @return ($px / $base-font-size) * 1rem;
}

...mapActions({ setUserInfo: "setUserInfo" }),

computed: {
  ...mapGetters(["sportsList"])
},

vue2 + vue-router2 + vuex +webpace + es6）新手福利，干货多多

git clone https://github.com/liangxiaojuan/vue-Meizi.git

• 瀑布流布局
• 无限滚动
• 侧边导航
• 图片懒加载
• 左右滑动切换

import infiniteScroll from 'vue-infinite-scroll';  // 引入滑动模块
import VueLazyload from 'vue-lazyload';  // 引入图片懒加载模块

// error，loading是图片路径, 用require引入
Vue.use(VueLazyload, {
    error: require('./assets/404.png'),
    loading: require('./assets/loading.gif'),
    attempt: 1
  }
);

karma+webpack 搭建 vue 单元测试环境

karma

使用 vue2+Vuex+Router 重写饿了么点餐系统和 vue 插件简析

better-scroll fastclick

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

const router = new VueRouter({
 routes,
 mode: routerMode,
 strict: process.env.NODE_ENV !== 'production',
 scrollBehavior (to, from, savedPosition) {
     if (savedPosition) {
      return savedPosition
  } else {
   if (from.meta.keepAlive) {
    from.meta.savedPosition = document.body.scrollTop;
   }
      return { x: 0, y: to.meta.savedPosition || 0 }
  }
 }
})

import FastClick from 'fastclick'

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

SVG学习

async await

  ...mapState([
     'question', 
 ]),
 markdownText: function (){
        //转换markDown格式
   let converter = new showdown.Converter();  
     return converter.makeHtml(this.question.detail);  
 }
},