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發布服務選項，分別右擊啟動，並右鍵屬性改為啟動類型就可以。
這是重新啟動下，就可以訪問。