开心大表哥

前言：公司经常会有一些活动，为了配合活动开发人员需要开发一些h5页面来配合活动，刚开始活动不多，所有活动页面都放在一个项目目录下，webpack共用一个固定打包入口，对路由(vue-router)和状态管理(vuex)进行模块划分，不同的活动页面通过不同的路由路径来加载。随着活动项目增多，页面也越来越多，问题就就出现了，比如打包projectA，webpack也会把projectB,proje...

前言:作为一个小白，我们经常会迷惘webpack+vue项目究竟要怎样的呢？本次的文章就是为了解答这个问题的，跟着本文的思路你可以很轻易和明白一个简单的webpack+vue项目是怎样构建和运行起来的。源码地址成果图： 图中左边是项目效果，右边是源码。 下载源码后 1.安装必要的组件：npm ii是install的简写啦，我一不小心又开始装B了。。。。2.运行项目...

背景：vue下使用elementUI文档：http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian需求：只保存二级节点中选中的数据；不保存一级节点选中的数据。效果：数据来源：后台提供两个接口分别用于取第一级节点和第二级节点的数据；思路：点击标签列表时，触发selectLabelList获...

Masonry是最流行的瀑布流插件之一，配置简单，功能强大，在Github上收获了1.3w+ stars。如果你想使用瀑布流提升网站体验，Masonry将是不错的选择。啥是瀑布流：是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这...

Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期，使用起来十分方便。但是它经过webpack打包之后会变得十分的大。我们做一下对比：测试版本：“moment”: “^2.17.1”,没import moment from 'moment';前webpack打出来的index.js包：js/chunk/index/index.eb9cbc...

续vue源码分析系列一：new Vue的初始化过程在initMixin()里面调用了$mount()if (vm.$options.el) { vm.$mount(vm.$options.el);// 挂载dom元素}$mount()方法定义vm的原型上本身就定义了一个$mount(如下所示)，然后通过重写$mount方法，最后返回的时候，调用这个缓存$mount方法。//...

render手写 render 函数，仔细观察下面这段代码，试想一下这里的 createElement 参数是什么 。new Vue({ el: '#application', render(createElement) { return createElement('div', { attrs: { id...

前言下面介绍本人开发的个人博客，希望通过开源的方式一起学习和进步！1. 背景该项目为一个学习型的博客网站案例，毕竟每个it工程师都想有一个自己的博客嘛，适合初中级前端工程师；项目已经部署在阿里云上，已经比较完整了，本地下载代码和安装好对应的环境，运行即可以获得线上的效果。由于项目涉及到服务器端而且用了数据库作为存储工具，架构用了eggjs和easywebpack所以首次运行的步骤比较繁琐，还...

import Vue from ‘vue’（作者用的vue-cli一键生成）node环境下import Vue from 'vue'的作用是什么意思？在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：具体参考：官网完整版：同时包含编译器和运行时的版本。编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。运行时...

createElementVue.js 利用 createElement 方法创建 VNode，它定义在 src/core/vdom/create-elemenet.js 中：// wrapper function for providing a more flexible interface// without getting yelled at by flowexport functi...

由于前几篇文章是用vue-cli直接分析的，今天我们学习直接调试vue源码。安装vue（mac机)1.在GitHub上克隆官方的vue-地址2.安装依赖npm install修改vue项目1.在package.json script dev 增加--sourcemap指令"dev": "rollup -w -c scripts/config.js --environment TARGE...

待续

单个插槽只使用这个标签的话，可以将父组件放在子组件的内容，放到想让他显示的地方具名插槽将放在子组件里的不同html标签放在不同的位置 父组件在要分发的标签里添加 slot=’name’ 属性 子组件在对应分发的位置的slot标签里，添加name=’name’ 属性， 然后就会将对应的标签放在对应的位置了案例地址：http://dotwe.org/vue/e639fd3...

[Vue] - 1. 如何实现一个响应式对象最近在看 Vue 的源码，其中最核心基础的一块就是 Observer/Watcher/Dep, 简而言之就是，Vue 是如何拦截数据的读写， 如果实现对应的监听，并且特定的监听执行特定的回调或者渲染逻辑的。总的可以拆成三大块来说。这一块，主要说的是 Vue 是如何将一个 plain object 给处理成 reactive object 的，也就是，...

wepy是由腾讯团队推出的小程序组件化开发框架，为什么一开始推出的时候不直接用这一套！？官网地址 WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。 特性： 类Vue开发风格 支持自定义组件开发 支持引入NPM包 ...

vue去掉严格开发，即去掉vue-cli安装时的eslint 1.vue-cli书写规范（主要是js规范） a、逗号、冒号后面要加空格 b、不能使用双引号，一律使用单引号 webpack的语法检查eslint，即安装项目时我选择了安装eslint（http://blog.youkuaiyun.com/a419419/article/details/77938751） 2.那么只需要删掉 bu

1.跨域，是一个需要前后端一起解决的服务器问题，在vue-cli的webpack有解决这个问题的功能。 例如前端向后台服务器（http://localhost/echoIp/index.php）发送一个请求，然后将收到的数据打印到页面。 那么由于开发环境不在这个服务器上，所以就会产生跨域的问题。于是我们需要用到axios及修改配置文件。 请求页面的代码如下：created(){ thi

为了使用sass，我们需要安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass在文件中写上<style lang="sass"><style>出现了错误的话就将sass换成scss<style lang="scss"><style>

vue获取手机验证码60秒倒计时，不能点击按钮export const resend = element => { console.log(element) var num = 60 var timer = setInterval(function () { num-- element.innerHTML = num + '秒后重新获取' element.styl

先来看两张效果图： 接下来看看实现代码： 1.组件代码：由于是一个组件所以就简单粗暴的全部写在一个页面了Pagination.vue<!-- params: pageNo: 总页数 current: 当前的页码 --><template> <div class="pager"> <select class="select-page" @change=

懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。 简单的说就是：进入首页不用一次...

资源文件处理 在我们的项目结构里，有两个资源文件的路径，分别是：src/assets 和 static/。那这两个到底有什么区别呢？ Webpacked 资源 为了回答这个问题，我们首先需要理解webpack是怎样处理静态资源的。在*.vue组件中，所有的templates和css都会被vue-html-loader 和 css-loader解析，寻找资源的URL。 举个例子，在&lt;i...

Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。 1、beforeCreate 　　在实例初始化之后，数据观测和event/watcher时间配置之前被调用。 2、created 　　实例已经创建完成之后被调用。在这一步...

需求：如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径：&lt;img src="../assets/a1.png" class="" width="100%"/&gt;2.利用数组保存再循环输出：&lt;el-carousel-item v-for="item in carouselData" :k...

案例图： 五分钟教程： 通过 Vue.js 命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目：# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpv...

mvvm（Model-View-ViewModel）模式： 由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，结构如下图。 通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。使用MVVM模式有几大好处：　　1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Mo...

1.vue-cli是基于node.js的所以必须安装node.js及其对于的包管理工具npm或者cnpm。 用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的, 所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识。 2.安装脚手架：npm install -g vue-cli -g表示全局安装, vue-cli是模