VUE技术栈学习笔记（https://segmentfault.com/a/1190000012530187）

最新推荐文章于 2025-08-15 09:01:53 发布

转载最新推荐文章于 2025-08-15 09:01:53 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bd1249a6fb9a05d185f2f27

文章标签：

#javascript #git #markdown #ViewUI

本文分享了一套博客系统及多个前端项目代码实例，涵盖了Vue、Markdown解析、响应式设计等，通过实战项目深入探讨了前端开发技术栈的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一套博客系统 项目代码：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);  
 }
},复制代码