vue编译图
❶ Vue项目中设置背景图片方法
在Vue项目开发中我们经常要向页面中添加背景图片，可是当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，如下CSS样式：
background:url("././assets/head.jpg");
这个时候我们就要考虑使用其他的方式了，node中提供了一种比较有效的方式来解决这个问题：
1、在data中定义如下：
export default { name: 'proctdetailspage', data() { return { note: { backgroundImage: "url(" + require("././assets/save.png") + ")", backgroundRepeat: "no-repeat", backgroundSize: "25px auto", marginTop: "5px", }, } },
2、通过行内样式将样式引入
<div class="note" :style ="note"></div>
就这样就能完美的解决这个问题了。
❷ Vue源码编译思想之parse那些事
楔子笔者公司的前端小组掀起了Vue源码学习小组，前后几个月的共同学习，让小组成员都已经对Vue对大致框架有了个模糊对轮廓。现在已经进入第二阶段：整理。
我们将小组分为四个部分，vue对整理也分为三个大模块：数据绑定、从template到vnode、vnode转化为dom对patch。
笔者对小组被分到了template到vnode对部分，拿到手后，感觉内容比较多，就先将内容根据源码对布局分为两小块：parse和render过程。
再者，古人云：兵马未动，粮草先行。笔者打算先介绍思想和思路，然后在具体到一些细枝末节。
本文准备到就是parse部分思想。
正文一、整个编译过程的目的我们都知道使用vue到时候，我们使用定制样式到几种方式大致为：
1.optionstemplate。
2.el。（挂载的节点）
3.render方法。
我们需要明白到是无论是哪种方式，我们最终的目的都是生成以vnode为单位vdom树
而生成的vdom树，最终是用于patch过程中，生成真实dom节点。
所以我们的编译的最终目的是获得：
Virtuedom形式大致如下图：
暂时不用管每个属性的作用，我们已经知道我们的目标是怎样的了。那么还需要知道的是起始点和过程。
正常情况下，如果我们这样初始化的话：
newVue({el:'#el',template:`<div><divv-for="(item,index)inoptions":key="item.id">{{item.id}}<div>{{item.text}}</div></div></div>`,data:{name:"dinglei",options:[{id:1,text:'Hello'},{id:2,text:'World'}]}})那我们的初始化的状态则是template的一串String。
当然初始化为String的写法还是满多的。比如：
不传template，直接使用使用$el。
template，使用一个模版。
所以我们从的转换过程，就是从一串String的模版到virtuedomtree的过程。
但是值得一提的是，vue从模版到vdom的过程并非是直接一次性到位的过程。可能是因为尤大的设计的vnode和原生的dom属性差距过大，直接编译成vnode不好完成。其次是考虑到性能优化等方面。
所以vue的编译过程其实是分为三个过程：
parse
optimize
codegenforrenderAndrender
分别对应三个过程：
从模版到astElement
在astElement的基础上优化添加标记staticRoot，当然这个层面的static标记最后是用于第三步codegen里面的。
codegen生成render函数，render绑定实例后，再进行执行就可以得到vnode的树。
流程大致如下图：
接下来我们将进入本文的主题
二、parse、optimize、codegen的核心思想解读。1）parse解读首先需要明白astElement包括哪些属性。在vue源码flow文件目录下的compiler.js可以找到astElement的模型
declaretypeASTElement={type:1;tag:string;attrsList:Array<ASTAttr>;attrsMap:{[key:string]:any};rawAttrsMap:{[key:string]:ASTAttr};parent:ASTElement|void;children:Array<ASTNode>;start?:number;end?:number;processed?:true;static?:boolean;staticRoot?:boolean;staticInFor?:boolean;staticProcessed?:boolean;hasBindings?:boolean;text?:string;attrs?:Array<ASTAttr>;dynamicAttrs?:Array<ASTAttr>;props?:Array<ASTAttr>;plain?:boolean;pre?:true;ns?:string;component?:string;inlineTemplate?:true;transitionMode?:string|null;slotName?:?string;slotTarget?:?string;slotTargetDynamic?:boolean;slotScope?:?string;scopedSlots?:{[name:string]:ASTElement};ref?:string;refInFor?:boolean;if?:string;ifProcessed?:boolean;elseif?:string;else?:true;ifConditions?:ASTIfConditions;for?:string;forProcessed?:boolean;key?:string;alias?:string;iterator1?:string;iterator2?:string;staticClass?:string;classBinding?:string;staticStyle?:string;styleBinding?:string;events?:ASTElementHandlers;nativeEvents?:ASTElementHandlers;transition?:string|true;transitionOnAppear?:boolean;model?:{value:string;callback:string;expression:string;};directives?:Array<ASTDirective>;forbidden?:true;once?:true;onceProcessed?:boolean;wrapData?:(code:string)=>string;wrapListeners?:(code:string)=>string;//2.?:number;//weexspecificappendAsTree?:boolean;};在开始讲流程之前，先列出整个流程会出现的重要的角色。下面的流程和流程图都是以此为基础的。角色识别器（parseHTML）（1）
存储栈（stack）（2）
创建函数（createASTElement）（3）
上下文（currentParent）（4）
开始处理函数start（5）
结束处理函数end（6）
整体工作流程大致如下：1.就是识别器（1）利用正则从前到后识别所有敏感字段。如（标签、事件、迭代、数据绑定、插槽等等）
2.开始标签例如<div>{{test}}</div>里的<div>,识别器（1）一旦识别到此类标签，就会使用开始函数start（5）来对开始标签做统一处理，而start函数会创建一个astElement并存放到stack当中，当时创建的方式是利用创建函数（3）创建的，同时也会处理一些非组件属性（具体如v-model、v-if、v-for）。这里需要注意的是：
1.一元标签如：img等，会直接走3处理。
p标签会做特殊处理，目的是为了和浏览器等识别方式达到目标一致。具体点击此处
3.识别到闭合标签，则会转交给end函数来处理，end函数会摘取原生属性如：id、class等等、还有ref、slot、component、key等等，并跟上下文（4）建立起父子关系。最终形成了树的结构。
4.一直重复1～3直到stack没有任何标签。
流程图大致如下：其中的细节特别多，如果有兴趣请关注我们的动态，我们会在下期给出详细过程讲解。点击这里了解更多
2）optimize思想解读。我们在上面已经给出了astElement的详细属性，其中有两个属性叫做staticRoot和staticInFor。而optimize的过程，就是给astElement打上这两个标记。这里是为了让这类静态节点，在render过程，能够走缓存的方式，只渲染一次。
好处很明显，就是静态节点不需要重复对比和重新渲染，以此来提高整体性能。
3）codegenerate解读这个过程其实还没有生成vnode，而是生成一个执行函数，且包含了this的执行code，其格式如下：
with(this){_c('div'...xxx...xxx)}我们在强调下，这次又是从astElement直接到另一个String。上面astElement是个树状结构。
然后在这个过程，基本一个astElement就对应一个短函数。最基本短函数是createElement也就是_c。最终的树状结构，会以函数的形式表现处理函数如下：
_c('div',{key:'xxx',ref:'xx',pre:'xxx',domPro:xxx,....},[//chidren_v(_s('ding')),_c('p',{model:'isshow',},[...xxx])])可以清晰的看到，最终形成的string，依然是一个树状形式，是以function形式展示的树状，而且所有属性都已经抽离成createElement的第二个参数。
这里对短函数做个简单的说明：1.短函数最终执行短this其实就是Vue实例，或者组件实例。
2.短函数比较重要的三个创建函数分别是_c(createElement)、_v(createTextVNode)、_e(createEmptyVNode)，分别生成三种类型的vnode。
一句话概括下codegenerate做的事情就是：
生成vnode的前置工作，抽离astElement所有的属性，形成短函数链。
短函数对应大致如下：
(target:any){target._o=markOnce//v-oncetarget._n=toNumbertarget._s=toStringtarget._l=renderList//v-fortarget._t=renderSlot//slottarget._q=looseEqualtarget._i=looseIndexOftarget._m=renderStatic//statictarget._f=resolveFiltertarget._k=checkKeyCodestarget._b=bindObjectPropstarget._v=createTextVNodetarget._e=createEmptyVNodetarget._u=resolveScopedSlots//scopeSlottarget._g=bindObjectListeners//linsnerstarget._d=bindDynamicKeystarget._p=prependModifier}4)render函数。这个过程是直接执行，就会得到以vnode为节点对虚拟dom树，其细节包括了component的处理，会有单独一节去介绍。最后这些虚拟树会丢给patch函数，最终在不断对比对过程中生成目标真实对dom树。这里展示下vnode的格式。
declareinterfaceVNodeData{key?:string|number;slot?:string;ref?:string;is?:string;pre?:boolean;tag?:string;staticClass?:string;class?:any;staticStyle?:{[key:string]:any};style?:string|Array<Object>|Object;normalizedStyle?:Object;props?:{[key:string]:any};attrs?:{[key:string]:string};domProps?:{[key:string]:any};hook?:{[key:string]:Function};on?:?{[key:string]:Function|Array<Function>};nativeOn?:{[key:string]:Function|Array<Function>};transition?:Object;show?:boolean;//markerforv-showinlineTemplate?:{render:Function;staticRenderFns:Array<Function>;};directives?:Array<VNodeDirective>;keepAlive?:boolean;scopedSlots?:{[key:string]:Function};model?:{value:any;callback:Function;};};总结1.编译四大过程parse、optimize、codegen、render。
2.用户自定义的render其实是忽略了前面三个步骤，直接定制的方式。
3.vdom最终是以vnode为节点的树状结构，在patch过程，会以新老vdom进行对比，来决定哪些dom是需要更新或添加、删除的。
❸ vue项目部署iis服务器
一、将vue项目进行打包编译后，根目录生成dist的文件
当出现如上图显示时，说明打包编译完成，已经生成dist文件
二、打开iis服务器
打开iis服务器后选中【网站】后右击选【添加网站】，就可对网站进行配置，物理路径选择编译后的dist文件夹后选确定就行。
三、右击选择【启动】后出现如下报错信息：
除非Windows Activation Service (WAS)和万维网发布服务(W3SVC)均处于运行状态，否则无法启动网站
解决：
打开命令提示符中输入services.msc ,打开服务。
找到windows install及word wide web发布服务选项，分别右击启动，并右键属性改为启动类型就可以。
这是重新启动下，就可以访问。