锛堜笅锛夋ā浠裤€奦ue鐢熸€併€嬬郴鍒梍__銆婃ā鏉挎晠浜嬨€嬨€傛浠诲姟缁х画锛氬畬鎴愮涓€涓湭瀹屾垚鐨勨€滅儹鏇存柊鈥濋厤缃€傛牳蹇冿細瀹屾垚'妯℃澘鍒嗘瀽'妯″潡鐨勭浉鍏冲啓浣滐紝寰堝鏂囩珷瀵规ā鏉跨殑鍒嗘瀽璁茶В鐨勫お娴呫€傝繖涓€娆★紝璁╂垜浠竴璧锋繁鍏ヨ璁猴紝灏藉彲鑳藉鍦拌瘑鍒敤鎴疯鍙ャ€傚惎钂欙細鍦ㄧ粨鏋勪笂锛屾湁鈥樺弻鍚戠粦瀹氣€欍€亀atch銆乨ep绛夋ā鍧楃殑缂栧啓鍩虹銆傛渶缁堟晥鏋滃浘1.鏃㈢劧瑕佸紑鍙憁vvm妯℃澘椤甸潰锛屽綋鐒惰妯℃嫙鐪熷疄鐨勪娇鐢ㄥ満鏅€傛垜浠妸鐩稿叧鏂囦欢鏀惧湪'cc_vue/use'璺緞涓嬶紝浠ｇ爜濡備笅锛?cc_vue/use'/1:Templateanalysis/index.html'锛屾湰鏂囦笓闂ㄥ睍绀烘ā鏉垮垎鏋愰〉闈?cc_vue/use/1:Templateanalysis/index.js'锛屾湰鏂囦笓闂ㄥ睍绀烘ā鏉垮垎鏋恏tml鏂囦欢淇℃伅鐨勯€昏緫浠ｇ爜锛屼絾鏄唴瀹瑰啑闀匡紝姣棤鎶€鏈彲瑷€锛岃繖閲屽氨涓嶅睍绀轰簡銆俧unctioninit(){newC({el:'#app',data:{title:'濂藉ソ瀛︿範',ary:[1,2,3],obj:{name:'閲戞瘺',type:['绔ュ勾','鎴愮啛','鍏ㄨ韩']},fn(){return'澶у濂斤紝杩欐槸锛?+this.obj.name;}}});}exportdefaultinit;1銆侀厤缃枃浠跺拰绠€鍗曠殑鐑洿鏂颁箣鎵€浠ョ畝鍗曪紝鏄洜涓烘垜浠笉浼氬仛鐨勫緢璇︾粏锛屾瘮濡傝繖娆℃垜浠笉浼氳拷姹傛瘡娆￠兘绮剧‘鏇存柊锛岃€屾槸姣忔閮芥洿鏂版暣浣撱€傛瘯绔熻繖涓伐绋嬬儹鏇存柊鍙槸涓€涓煡璇嗙偣锛屾垜浠繕鏈夊緢澶氬緢澶氭洿閲嶈鐨勪簨鎯呰鍋歟mmmmm涓€浜涜嚜宸辫鐐圭殑鐑洿鏂颁笉鏄緢閲嶈鐗涢€硷紝鎴戜箣鍓嶉厤缃簡vuex鐨勭儹鏇存柊锛岀劧鍚庢€荤粨瀹冧簡銆傚畠绫讳技浜庡洖璋冨嚱鏁扮殑姒傚康銆傚師鐞嗘槸褰揺ditor鎴栬€卻erve妫€娴嬪埌浣犵殑鏂囦欢鍙戠敓鍙樺寲鏃讹紝鎵ц涓€涓洖璋冨嚱鏁般€傝繖涓洖璋冨嚱鏁伴噷闈㈠寘鍚簡涓€浜涢噸鏂版覆鏌撱€佹洿鏂癲om绛夋搷浣滐紝澶у鍙兘浼氭湁鐤戞儜銆倂ue鐨勭儹鏇存柊杩欎箞濂斤紝灞呯劧娌℃湁鐑洿鏂扮殑鍥炶皟鍑芥暟銆傚叾瀹炶繖閮芥槸'vue-loader'鐨勫姛鍔筹紝css鐑洿鏂版祴璇曟槸css-loader,浠栦滑鍦ㄦ枃浠跺鐞嗛樁娈靛皢鐑洿鏂板洖璋冧唬鐮佹敞鍏ュ埌js鏂囦欢涓紝鎵€浠ユ垜浠槸楹绘湪涓嶄粊鐨勶紝鎵€浠ユ病鏈?loader'甯垜浠敞鍏ョ儹鏇存柊锛屾墍浠ヨ繖娆℃垜浠墜鍔ㄥ疄鐜般€傪煇呮湁鍏磋叮鐨勫悓瀛﹀彲浠ュ幓瀹樼綉鐨勬暀绋嬶紝涓€涓畝鐭殑閰嶇疆鏂囦欢锛屽垎涓虹敓浜х幆澧冨拰寮€鍙戠幆澧冿紙铏界劧鎴戜滑鐢熶骇涓嶉渶瑕侊紝浣嗘槸鐢ㄦ潵瀛︿範杩樻槸涓嶉敊鐨勶級锛沚uild---productionpackagingcommon---commonpackagedev---developmentpackagecommon.jsconstdev=require('./dev');constpath=require('path');constbuild=require('./build');constmerge=require('webpack-merge');constcommon={entry:{main:'./src/index.js'},output:{filename:'[name].js',path:path.resolve(__dirname,'../dist')},妯″潡锛歿瑙勫垯锛歔{娴嬭瘯锛?.css$/锛屼娇鐢細['style-loader'锛?css-loader'锛?postcss-loader']}锛寋娴嬭瘯锛?.js$/锛屾帓闄わ細/node_modules/,loader:'babel-loader?cacheDirectory=true'}]}};module.exports=env=>{letconfig=env=='dev'?寮€鍙戯細鏋勫缓锛涜繑鍥炲悎骞讹紙閫氱敤锛岄厤缃級锛泒锛涙湁merge鐭ヨ瘑鐨勯厤缃繃webpack鐨勫悓瀛﹂兘鐭ラ亾锛宮erge鏄湁鐏甸瓊鐨勩€傚熀鏈笂姣忎釜椤圭洰閮戒細鏈夊绉嶇被鍨嬬殑鎵撳寘锛岄厤缃枃浠舵洿鏄暟涓嶈儨鏁帮紝鎶婅繖浜涢厤缃暣鍚堣捣鏉ュ苟涓嶅鏄擄紝鎵€浠ユ垜浠潵鐪嬬湅webpack-merge鐨勬晥鏋溿€俷pmiwebpack-merge-D鎴戜滑杩涜濡備笅瀹為獙letobj1={a:1,b:[1],c:{鍚嶇О:1}};璁﹐bj2={a:2,b:[2],c:{age:2}};merge(obj1,obj2)缁撴灉鏄細{a:2,b:[1,2],c:{name:1,age:2}};鍦ㄦ垬鐣ヤ笂锛屽悗鑰呭噷椹句簬鍓嶈€呬箣涓娿€傞亣鍒版櫘閫氬€硷紝鐩存帴瑕嗙洊銆傞亣鍒版暟缁勶紝浼氱敤鍒皃ush()銆傚綋閬囧埌涓€涓璞℃椂锛屽畠浼氶€夋嫨瑕嗙洊鍘熸潵鐨勫睘鎬э紝鎴栬€呭鏋滄病鏈夊師鏉ョ殑灞炴€у氨娣诲姞涓€涓柊鐨勩€傝繖鍏跺疄寰堟湁瓒ｃ€傛垜鍙互鍦ㄥ叾浠栧湴鏂逛娇鐢ㄨ繖涓柟娉曪紝涓嶅眬闄愪簬webpack閰嶇疆锛屽涔犲拰浣跨敤瀹冨緢鏈夎叮馃銆傝繖娆¤В閲婁竴涓嬬敤娉?/瀵煎嚭涓€涓嚱鏁帮紝鍙湁鍑芥暟鎵嶈兘鎺ユ敹浼犻€掕繃鏉ョ殑鍙傛暟銆俶odule.exports=env=>{//鐩存帴鍒ゆ柇鍙傛暟鐨勭被鍨嬫潵鍐冲畾浣跨敤鍝竴缁勯厤缃紱璁ヽonfig=env=='dev'锛熷紑鍙戯細鏋勫缓锛?/灏嗛厤缃笌閫氱敤鍩虹閰嶇疆鏁村悎骞跺鍑簉eturnmerge(common,config);};鍚姩鍛戒护鐨勮皟鏁?-hotstartuphotUpdate锛屽鏋滃啓鍦ㄩ厤缃枃浠朵腑锛岃繖鍙ヨ瘽鍙互涓嶅姞銆?-envdev閰嶇疆浼犲叆鐨勫弬鏁板瓧绗︿覆'dev'锛屽繀椤诲啓鍦ㄨ繖閲?-env.--config./config/common.js鎸囧畾闇€瑕佽皟鐢ㄧ殑閰嶇疆鏂囦欢涓?/config/common.js浠ｆ浛webpack.config.js."serve":"webpack-dev-server--hot--envdev--config./config/common.js",鐑洿鏂颁娇鐢╟c_vue/config/dev.jsconstpath=require('璺緞');constWebpack=require('webpack');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={mode:'development',devtool:'source-map',devServer:{port:9999,hot:true,//杩欓噷蹇呴』寮€鍚?/hot鍜宧otOnly鐨勫尯鍒槸褰撴煇浜涙ā鍧椾笉鏀寔鐑洿鏂版椂锛屽墠鑰呬細鑷姩鍒锋柊椤甸潰锛屽悗鑰呬笉浼氬埛鏂伴〉闈紝浣嗗湪Console杈撳嚭鐑洿鏂板け璐,plugins:[//鐩稿叧鎻掍欢涔熼渶瑕佸姞杞絥ewWebpack.HotModuleReplacementPlugin(),newHtmlWebpackPlugin({filename:'index.html',template:path.resolve(__dirname,'../use/1:妯℃澘瑙ｆ瀽/index.html'),})]};鎺ヤ笅鏉ュ啓浠ｇ爜锛屾垜浠鐢ㄥ埌鐑洿鏂版ā鍧?.鍐欐牳蹇僀绫籧c_vue/src/index.jsimport'../public/css/index.css';importCompilerfrom'./Compiler.js';//鍏跺疄杩欎釜绫荤殑鍔熻兘寰堢畝鍗?/鍦╲ue鐨勬簮鐮佷腑锛岃繖涓被鍙垽鏂敤鎴锋槸鍚︿娇鐢╪ew锛屽悓鏃惰皟鐢╥nitclassC{constructor(options){//杩欓噷锛屾垜浠笉'绠＄敤鎴蜂紶浠€涔堬紝鎴戜滑鐩存帴鍏ㄩ儴鎸傚湪鑷繁韬笂锛屽姞涓?绗﹀彿琛ㄧず銆俧or(letkeyinoptions){this['$'+key]=options[key];}//杩欓噷鎴戜滑瀹炰緥鍖栦簡妯℃澘鐨勭被锛?/杩欐槸鏈湡鐨勪富棰橈紝妯℃澘鐩稿叧鍒嗘瀽newCompiler(this.$el,this);}}//姣旇緝浼犵粺鐨勫啓娉曪紝鎸傚湪Globally涓婏紝鍏跺疄鎵€鏈夌殑鎿嶄綔閮藉彧鏄妸杩欎釜鍙橀噺鏆撮湶缁欑敤鎴凤紱绐楀彛.C=C;寮曞叆鐑洿鏂板彧鏄竴涓緥瀛愶紝杩欐涓嶄細浣跨敤importinitfrom'../use/1:templateanalysis/index';...window.C=C;//鎵ц鍒濆鍖栵紝浠ｇ爜宸茬粡pasted.init();//褰撴湁鐑洿鏂版椂if(module.hot){//鐩戝惉杩欎釜鏂囦欢鐨勫彉鍖杕odule.hot.accept('../use/1:templateparsing/index.js',function(){//鏀瑰彉鍚庡仛浠€涔坕nit();});}杩欐娌℃湁鐢ㄥ埌鐨勫師鍥犳槸椤圭洰鍒氬紑濮嬶紝娌℃湁update鏂规硶锛屽嵆浣挎娴嬪埌鏂囦欢鍙樺寲涔熸病鐢紝姣斿鐢ㄦ埛杈撳叆{{a}}锛屽凡缁忚浆鎹负a瀵瑰簲鐨勫彉閲忋€傝繖涓椂鍊欏鏋滆鏇存柊杩欎釜鍊硷紝灏遍渶瑕佽Е鍙戝畠鑷繁鐨剈pdater鏂规硶锛屼絾鏄繖涓柟娉曟垜浠繕娌℃湁鍐欙紝鎵€浠ヨ繖娆′笉浼氱敤鍒帮紝鐩存帴浣跨敤鍒锋柊鏇存柊鍗冲彲锛屽皢鏉ユ偍灏嗘洿鏂扮壒瀹氭ā鍧椼€?.妯℃澘瑙ｆ瀽妯″潡cc_vue/src/Compiler.js//瑙ｆ瀽妯℃澘绯诲垪classCompiler{//褰撲綘涓嶇粰#app鐨勬椂鍊欙紝鎴戠粰浣犱竴涓粯璁ょ殑#app//鍥犱负杩欎釜椤圭洰涓嶆秹鍙婏紝'寤惰繜mounting'鎵€浠ヤ綘鍙互杩欐牱鍐?/vue灏嗘秹鍙婂欢杩熷畨瑁卌onstructor(el='#app',vm){this.铏氭嫙鏈?铏氭嫙鏈猴紱//1:濡傛灉鏄痙om锛岀洿鎺ヤ娇鐢?/濡傛灉鏄瓧绗︿覆锛岃幏鍙杢his.el=this.isElementNode(el)?el:鏂囨。.querySelector(el);//2:鍒朵綔鏂囨。鐗囨letfragment=this.node2fragment(this.el);//3:瑙ｆ瀽鍏冪礌锛屾枃妗ｆ祦涔熸槸涓€涓璞?/缂栬瘧瑙ｆ瀽鐨勬牳蹇冧唬鐮侊紝杩欎釜閫昏緫涓嬮潰浼氳鍒皌his.compile(fragment);//鏈€鍚庝竴姝ワ細瀹屾垚澶勭悊鐒跺悗灏嗗叾鎻掑洖this.el.appendChild(fragment);}/***@method鍒ゆ柇鏄惁涓哄厓绱犺妭鐐?@param{node}寰呭垽鏂妭鐐?@return{boolean}鏄惁涓哄厓绱犺妭鐐癸紝鍏冪礌鑺傜偣1*/isElementNode(node){returnnode.鑺傜偣绫诲瀷===1;}/***@method鍒ゆ柇鏄惁涓烘枃鏈妭鐐?@param{node}瑕佸垽鏂殑鑺傜偣*@return{boolean}鏄惁涓烘爣绛捐妭鐐癸紝鏂囨湰鑺傜偣涓?*/isTextNode(node){杩斿洖node.nodeType===3;}/***@method灏嗘墍鏈夎妭鐐规斁鍏ユ枃妗ｆ祦涓?@param{node}瑕侀亶鍘嗙殑鑺傜偣瀵硅薄*@return{fragment}杩斿洖鐢熸垚鐨勬枃妗ｆ祦*/node2fragment(node){//鍒涘缓鏂囨。娴佽fragment=document.createDocumentFragment();while(node.firstChild){//鎻掑叆鏂囨。娴乫ragment.appendChild(node.firstChild);}杩斿洖鐗囨锛泒}exportdefaultCompiler;compile杩欎釜鏂规硶鏈€閲嶈锛屼笅闈㈣璇磒ipe瀹炰緥涓轰粈涔堝彨'vm'鐨勭煡璇嗙偣锛屾憳鑷獀ue瀹樼綉锛堣櫧鐒秜ue娌℃湁瀹屽叏閬靛惊MVVM妯″瀷锛屼絾鏄璁ue涔熷彈鍒板畠鐨勫惎鍙戙€傚洜姝ゆ枃妗ｄ腑缁忓父浣跨敤鍙橀噺鍚峷m锛圴iewModel鐨勭缉鍐欙級鏉ヨ〃绀篤ue瀹炰緥锛塶odeType锛屾瘡涓妭鐐归兘鏈夊搴旂殑绫诲瀷锛?/鍏冪礌鑺傜偣锛?//灞炴€ц妭鐐?2//鏂囨湰鑺傜偣,3//璇勮鑺傜偣,8杩欎釜涔熷緢鏈夌敤//document,9//DocumentFragment11createDocumentFragment()鏂规硶锛屾垜涓€鑸彨瀹冨垱寤烘枃妗ｆ祦鐗囨锛屼紬鎵€鍛ㄧ煡鎿嶄綔dom寮€閿€寰堝ぇ锛岃€屽鏋滈渶瑕佹彃鍏?0000涓猟om锛岄偅灏辩湡鐨刧g浜嗭紝涓嶈繃鍒嗙墖闂鍙互杞绘澗瑙ｅ喅銆傛槸铏氱殑锛屼絾鏄彲浠ュ儚鍏冪礌涓€鏍锋搷浣滐紝鎵€浠ュ彲浠ュ厛鎶婂厓绱犳斁鍦ㄩ噷闈紝鍐嶆斁鍒扮洰鏍噋arent涓氨鍙互浜嗭紝鎵€浠ュ彧闇€瑕佹彃鍏ヤ竴娆★紝涓嶄細褰㈡垚鍏冪礌鍦ㄩ〉闈笂銆侼ode.prototype涓婄殑appendChild鍜宎ppendappendChildappend涓婄殑Document.prototype閮借〃绀哄厓绱犳渶鍚庢坊鍔犵殑鏁板瓧涓嶆敮鎸佷紶鍏ュ瓧绗︿覆鐢熸垚鏍囩锛屾瘮濡?
