感恩、奋进、自信

看完vue-init首先，需要有一个自己模版项目其次，如果需要自定义一些变量，就需要在模版的meta.js当中定制下载模块使用的是模块，支持github，gitlab，bitucket上下载，只需要将定制好的模板项目放到git远程仓库上即可。

本文将按照下面的顺序逐一讲解：1）什么是微前端以及为什么使用微前端2）乾坤框架介绍3）基于乾坤框架实例一、什么是微前端微前端的核心思想就是将按照不同功能或不同维度拆分的独立子应用，通过主应用来加载这些子应用，达到子项目可以独立开发、独立部署、不受技术栈影响效果。二、乾坤框架介绍下面的地址是乾坤文档地址，详细介绍了微前端的概念、乾坤的核心设计思想介绍https://qiankun.umijs.org/zh/guide三、乾坤框架实例说明：例子基于三个独立项目，项

vue router即通过改变url，在不重新请求页面的情况下，更新页面视图vue router 方式有三种，通过mode去定义使用具体的路由模式，mode的值如下：hash|history|abstract一、实现方式：hash模式早期的前端路由跳转就是利用location.hash来实现的，像下面的链接，#及后面的内容一起组成hash的值https://www.baidu.com.cn/index.html/#/content?id=1234hash指示了加载页面的路径位

1、微信环境下、app环境下、谷歌浏览器下等内核实现原理不一致，引发vue中的钩子执行时序不一致，导致在vue中产生一些奇怪bug1）在微信环境下，在beforeRouteEnter钩子中的next里面调用$nextTick钩子不执行基本代码如下： beforeRouteEnter(to, from, next) { next(vm => { // do something // ..... console.log(1) vm.$

现在的应用开发，基本上都是前后端分离的，前端主流框架有SPA、MPA等，那么解决页面渲染、白屏时间成为首要关注的点webpack可以按需加载，减小首屏需要加载代码的体积；使用CDN技术、静态代码等缓存技术，可以减小加载渲染的时长问题：但是首页依然存在加载、渲染等待时长的问题。那么如何从视觉效果上减小首屏白屏的时间呢？骨架屏：举个例子：其实就是在模版文件中id=app容器下面写想要展示的效果，在new Vue(option)之后，该id下的内容就被替换了( 这时候，可能Vue编译生成的内容还没

一、vue2.x中响应式原理1）原理采用数据劫持 + 订阅-发布模式的方式，通过Object.defineProperty来劫各个属性的setter getter，数据变化时，发布消息给订阅者，触发响应的回调。即在创建Vue实例的时候，会遍历选项data的属性，用Object.defineProperty，为属性添加getter setter 对数据的读取进行劫持，在内部追踪依赖，在属性被访问或修改时，通知变化；如果属性是Object则会循环递归的处理2）在实现响应式原理中有三大核心实现..

vue版本基于vue2.6.12版本一、入口文件：vue/src/core/index.js下面是入口文件的一张思维导图vue/src/core/index.js源代码解析：1、初始化全局API：initGlobalAPI(Vue)2、定义实例属性$isServer3、定义实例属性$ssrContext4、定义实例属性FunctionalRenderContext5、定义私有属性Vue.version：定义当前版本号import Vue from './ins...

下面是关于vue3的一些新特性和新用法的讲解一、新增内置组件：teleport官文解释teleport：Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件场景：在组件A中使用alert弹窗，但不希望alert弹窗渲染的DOM结构嵌套在组件A中；而是渲染在我们指定的位置上实现方式： 1）使用<teleport to="#alert">包裹自定义的alert组件，to属性：是有效的查询选择器..

本文给出了一些不错的面试题文章地址1、结合vue2源码解析常见面试题参考文章链接：https://mp.weixin.qq.com/s/60HI-CM1GhqDG5zeTFSOrw2、Vue3源码解析nextTick方法：https://mp.weixin.qq.com/s/g4Mvt8P4xFOOSfciBtHOkA3、Vue3.0 新特性以及使用变更总结：https://mp.weixin.qq.com/s/OKCxvrUPoPM0hR-z9reESA...

本文主要介绍vue内容如下：1、在.vue文件中动态引进组件2、在.vue文件中动态引进js模块文件一、动态引进组件动态引进组件原因：在实际业务中，比如订单详情页面detail.vue，里面包含了多个第三业务的订单详情，但是不同的业务详情页面区别又很大，所以只能根据不同的业务来源，书写不同的详情组件，在根据业务来源展示相应的组件问题：如果详情对接的业务来源越来越多，并且不同的来源对于详情页面定制化需求又高，这样就会增加越来越多的组件，如果在页面都是直接引进组件，那么没用到的组件就会.

可以用作javascript异步模式的编程的方法：1、回调函数：这是异步编程最基本的方法2、事件监听：任务的执行不取决于代码的顺序，而取决于某个事件是否发生3、发布/订阅：上一节的"事件"，完全可以理解成"信号"4、Promises对象：Promises 对象是CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口

在vue编写的项目中，在浏览器的console报错：Invalid prop: type check failed for prop "radius". Expected Number, got String.如下图所示：在子组件progress-circle.vue的template中的定义如下： &lt;svg :width="radius" :height="radius" viewBox=...

要解决 这个问题，则是因为没有开启debug  mode，所以要对vue开启debug  mode在main.js中书写下面形式：import Vue from 'vue'Vue.config.devtools = true则可以在浏览器调试vue代码...

在子组件scroll.vue中的methods选项中定义方法refresh()，如下所示：//当已经存在berre-scroll实例的时候，DOM发生变化时，要对better-scroll实例重新更新 refresh() { this.scroll &amp;&amp; this.scroll.refresh() } 然后在父组件music-list.vue中的template调用...

在子组件scroll.vue中的methods选项中定义方法refresh()，如下所示： //当已经存在berre-scroll实例的时候，DOM发生变化时，要对better-scroll实例重新更新 refresh() { this.scroll &amp;&amp; this.scroll.refresh() }然后在父组件music-list.vue中的t...

使用vue2.0+编写一个音乐播放器所使用到的技术栈1、Vuex插件：对vue,js编写的项目进行状态管理的模式，用于抽取组件间共享的状态；定义和隔离状态，使代码易维护和结构化2、使用vue.js中的内置组件&lt;transition&gt;定义一些动画，普遍搭配如下：/*定义进入的过程和离开的过程的动画使用过度效果，用时2s完成*/.vm-enter-active,.vm-leave-act...

在vue中使用axios实现跨域请求需求分析：在项目中需要抓取qq音乐的歌曲列表的数据，由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg。从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名)，而host的域名是c.y.qq.com（被请求页面的域...

在vue中实现localStorage的思路：对window.localStorage[key]对象进行封装，这样就可以实现模块化的思想（实现window.sessionStorage的思想一样）如图1是在文件store.js中对localStorage的封装：完整的代码如下：//保存数据export function saveToLocal(id, key, value) {...

库和框架，vue和react的比较库：小而巧，只提供API，可以方便的从一个库切换到另外一个库，代码几乎不需要改变框架：大而全的是框架，，框架与框架之间的切换比较困难vue和react的比较一）组件化方面1）什么是模块化模块化是从代码的角度进行分析，把一些可复用的代码，抽离为单个模块，便于项目开发和维护2）什么是组件化组件化是从UI界面角度进行分析，把一些可...

在vue中给对象扩展属性的方法。如下图所示给seller对象扩展一个属性id，利用立即执行函数给id赋值                                                             图1然后将从后台返回来的数据赋值给seller对象，如下图所示：                                                       ...

Vue的本质Vue的本质就是用一个Function实现的Class，然后在它的原型prototype和本身上面扩展一些属性和方法。它的定义是在src/core/instance/index.js里面定义使用ES5的方式，即用函数来实现一个class，不用ES6来实现class的原因：在ES5中，是可以往Vue的原型上挂很多方法，并且可以将不同的原型方法拆分到不同的文件下，这样方便代码的...

在.vue文件的template标签里面引用子组件，如下所示&lt;scroll class="middle-r" ref="lyriclist" :data="currentLyric &amp;&amp; currentLyric.lines"&gt;&lt;/scroll&gt;然后再&lt;script&gt;中的methods属性中的一个方法去获取到该对象：由于&lt

vue中的混入对象mixins的定义 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项mixins:Array(Object)选项合并：当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合1）同名钩子函数将混合为一个数组，因此都将被调用（组合）2）混入对象的钩子将在组件自身钩子之前调用（调用顺...

1、vue-router的作用与及定义vue-router可以通过html5的history API或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；vue-router可以实现页面间传参等其他功能；vue-router就是路由，用于页面跳转。当我点击页面上的home  按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容...

1、在子component中的data不能是一个对象，必须是一个函数，然后该函数返回一个对象data(){ retrun { swiperOption:{} }}2、vue中，如果每个组件发生一个ajax请求，就会造成很大的性能损耗，如何操作可以降低性能损耗问题：在vue中，一个页面被拆分成多个component，如果每一个component都发生一个ajax请求，...

多页面网站的定义：每一次页面跳转的时候，后台服务器都会返回一个新的html文件，这种类型的网站就称为多页面网站（多页面应用）优点：首屏时间快---整个页面展现出来所需要的时间 SEO效果好首屏时间快的原因：当访问一个页面的时候，服务器返回一个html，然后这个html展现出来，这个过程只经历一个http请求的过程，所以页面展现快，请求回来了，页面就展现出来了SEO效果好的...

vue-router路由懒加载：打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载在创建路由的时候，component属性的值是一个异步函数//异步加载路由组件，可以减少加载...

vue+node.js+mongodb：书城系统的项目的构建概述1、课程主要讲什么：基于全栈开发一个简易的商城系统2、课程涵盖了哪些内容：商品列表、购物车、地址、结算、订单、登录模块3、课程使用了哪些技术栈：前端使用功能vue全家桶以及ES6语法；后端使用Express框架，DB使用Mongo非关系型数据库 项目整体架构如下图所示 Webpack：代码模块化构建打包...

vue中的computed的实现原理---------需要建立数据依赖搜集，动态计算实现原理1）问题：计算属性如何与属性建立依赖关系？属性发生变化又如何通知到计算属性重新计算？如何建立依赖关系？----------利用 JavaScript 单线程原理和 Vue 的 Getter 设计，通过一个简单的发布订阅，就可以在一次计算属性求值的过程中收集到相关依赖2）data 属性初始化 ge...

  1、vuex的定义1）Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，使用插件的形式引进项目中2）集中存储和管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化3）每一个 Vuex 应用的核心就是 store（仓库），new Vue.store({...})，“store”基本上就是一个容器，它包含应用中大部分的状态 (state)...

在用vue开发的时候，在浏览器端报错：Module not found: Error: Can't resolve 'common/js/util' in 'E:\vue-exercise\sell\src'报错的原因是util.js模块没有找到，在App.vue中引入的路径如下所示：在vue中引入的路径是错的，如果是当前目录下，则应该写成'./common/js/util'import { ur...

在vue中设置默认的路由，即一进入页面就显示其中一个路由的内容，也就是设定重定向。如下是设置默认路由的代码，即router文件夹下的index.js的内容：import Vue from 'vue';import Router from 'vue-router';import seller from '@/componentsllerller';import ratings from '@/...

在vue中通过父组件将数据传递给子组件的过程1）首先在父组件中引用子组件，并且在引用子组件中绑定对象变量例如在App.vue中引用子组件&lt;v-header&gt;，并且在标签里面绑定seller对象，如下面的代码是App.vue中的&lt;template&gt;中的内容：&lt;template&gt; &lt;div id="app"&gt; &lt;!--seller绑定，...

在vue中ajax()方法被封装成vue-resource插件，通过在项目中引入该插件，然后调用该插件的的方法或者属性，实现与服务器的通信。1、首先，在项目中安装本地的vue-resource：假设项目的整个框架已经安装完成，这时候只需要在本地安装vue-resource插件在cmd中输入“npm install vue-resource --save”2、安装完成以后，在src/main.js文...

在不同的设备上实现1像素边框，这是因为不同的设备的设备像素比不同，通常有1，1.5，2等，因此利用媒体查询和元素的伪类去实现在不同的设备像素比上实现1px的边框1、首先，在stylus文件夹下新建一个文件mixin.styl，内容如下border-1px($color) position:relative //让伪类相对于他定位，所以设置display:relative &amp;:af...

使用vue-cli创建的工程的相关文件介绍1、使用vue-cli安装的项目的整个文件如下图所示：下面介绍一级目录的文件夹的作用sell2是项目名；一级目录下的文件夹名build和config都是和webpack配置相关的；文件夹node_modules是通过npm install安装的依赖代码库；文件夹src用来存放项目源码，即开发的代码都放在src文件夹下；文件夹static存放第三方静...

vue.js的vue-cli的理解：vue-cli是Vue的脚手架工具，帮我们写好vue.js基础代码的工具，搞定目录结构、本地调试、代码部署、热加载、单元测试等工作。vue.js开发环境搭建1、安装node.js，下载地址，安装好之后需要配置node.js系统环境变量，这里要保证node.js的版本是4版本以上2、安装全局vue-cli脚手架，用于帮助搭建所需的模板框架首先：...

vue.js的核心思想包括：数据驱动和组件化思想。下面看一张关系图：如果没有中间的ViewModel则关系图编程下面所示：通过Ajax通信获得后台数据，那么要将获得数据显示在DOM上，则需要手动操作DOM节点。这是一个繁琐的过程，还很容易出错。而使用ViewModel则省去手动操作DOM 。在vue.js里面只需要改变数据，Vue.js通过Directives指令去对DOM做封装，当数据发生变化，...

下面介绍Vue中集成的指令以及用法和作用v-bind v-on v-model v-for v-html v-text v-if v-else-if v-else v-show v-once v-pre v-cloak1、声明式渲染有两种方法A、文本插值，用两个花括号：{{内容}}html如下：<div id="app"&gt...

对vue的template(模板)编译的理解简单的说法：先转化为AST树，在得到的render函数中返回VNode（vue的虚拟DOM节点）详细步骤● 首先，通过compile编译器把template编译成AST语法树（abstract syntax tree，即源代码的抽象语法结构的树状表现形式），compile是creatCompiler（createCompiler是用以创建编译器的）的返回...