一套博客系統 項目代碼：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); } },復制代碼

總結

以上是生活随笔為你收集整理的VUE技术栈学习笔记（https://segmentfault.com/a/1190000012530187）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。