0x00鍓嶈█鏈枃灏嗕粠缁撴瀯鍜屽姛鑳戒袱涓柟闈㈣瑙ｉ」鐩畍ue-code-view鐨勬瀯寤鸿繃绋嬨€傚彲浠ュ涔犲埌浠ヤ笅鍐呭锛氫娇鐢╲uecli4鎼缓缁勪欢搴撳拰璇︾粏鐨勯厤缃俊鎭粠0寮€濮嬮」鐩殑澶氱幆澧冩惌寤洪厤缃€傞」鐩綉绔欑殑鍙戝竷閮ㄧ讲鍜屾寔缁泦鎴愩€傚彂甯冮」鐩甆PM鍖呫€傞」鐩粍浠剁殑鑷畾涔塎arkdown瑙ｆ瀽鍔犺浇鍣ㄣ€傛湰鏂囨槸馃摎Element2婧愮爜瀛︿範绯诲垪鐨勬墿鍏呫€傞€氳繃涓婁竴绡囨枃绔犱簡瑙ｄ簡寮€婧愮粍浠跺簱鐨勭粨鏋勫拰鍘熺悊鍚庯紝濡傛灉鑷繁涔熸惌寤轰竴涓粍浠跺伐绋嬫€庝箞鍔烇紵鎺ヤ笅鏉ュ氨鏄疄璺电殑杩囩▼锛屼篃绠楁槸鈥滅煡琛屽悎涓€鈥濅簡锛佽€愬績闃呰锛岀浉淇′細瀵逛綘鏈夋墍甯姪锛?x01椤圭洰姒傝鍒涘缓椤圭洰鏈」鐩娇鐢╒ueCLI4.x杩涜椤圭洰鍒涘缓銆?/瀹夎鐜npminstall-g@vue/cli//鍒涘缓椤圭洰vuecreatevue-code-view鍦ㄧ粓绔緭鍏ュ懡浠ゅ悗锛屾寜鐓т互涓嬫楠ゅ垱寤洪」鐩細閫夋嫨Manuallyselectfeatures銆傛鏌abel銆佽矾鐢卞櫒銆丆SS棰勫鐞嗗櫒銆丩inter/Formatter鍜屽叾浠栧姛鑳姐€傞€夋嫨vueversion2.X閫夋嫨鏄惁浣跨敤history妯″紡杩涜璺敱锛岄粯璁ゆ槸銆傞€夋嫨CSS棰勫鐞嗗櫒Sass/SCSS锛堝甫鏈塶ode-sass锛夈€傞€夋嫨浠ｇ爜椋庢牸锛屾牸寮忔鏌inter/formatter浠ラ厤缃瓻SLint+Prettier銆備繚瀛樻椂閫夋嫨楠岃瘉鏃舵満妫€娴婰intonsave銆傞€夋嫨Babel銆丒SLint绛夐厤缃枃浠跺瓨鏀惧湪涓撶敤鐨勯厤缃枃浠朵腑銆傚湪涓撶敤閰嶇疆鏂囦欢涓€傞厤缃涓幆澧冨彉閲忥紝鍦ㄩ」鐩牴鐩綍鏂板缓.env銆?env.deploy銆?env.production绛夋枃浠躲€俈UE_APP寮€澶寸殑鍙橀噺浼氳webpack.DefinePlugin闈欐€佸祵鍏ュ埌瀹㈡埛绔寘涓紝浠ｇ爜涓彲浠ラ€氳繃process.env.VUE_APP[xxx]璁块棶銆侼ODE_ENV鍜孊ASE_URL鏄唬鐮佷腑濮嬬粓鍙敤鐨勪袱涓壒娈婂彉閲忋€?env\vue-cli-serviceserve榛樿鏈湴寮€鍙戠幆澧冮厤缃甆ODE_ENV=developmentVUE_APP_PUBLIC_PATH=/.env.production\vue-cli-servicebuild榛樿鐜閰嶇疆锛堝畼鏈嶏級NODE_ENV=productionVUE_APP_PUBLIC_PATH=/VUE_APP_ENV=pub.env.deploy\github椤甸潰鏋勫缓閮ㄧ讲鐨勭幆澧冮厤缃€俈UE_APP_PUBLIC_PATH涓鸿櫄鎷熺洰褰曡缃?vue-code-view銆侼ODE_ENV=productionVUE_APP_PUBLIC_PATH=/vue-code-viewVUE_APP_ENV=deploy鐩綍缁撴瀯璋冩暣榛樿src鐩綍瀛樻斁椤圭洰婧愮爜鍜岄渶瑕佸紩鐢ㄧ殑璧勬簮鏂囦欢銆傚湪椤圭洰绀轰緥缃戠珯鐨勬牴鐩綍涓嬫柊寤篹xamples鏂囦欢澶癸紝灏唖rc鐩綍涓嬬殑鏂囦欢绉诲姩鍒癳xamples鏂囦欢涓€俿rc鐩綍瀛樻斁椤圭洰缁勪欢鐨勬簮浠ｇ爜銆傝皟鏁村悗鐨勬牴鐩綍鏂囦欢缁撴瀯濡備笅锛氣敎鈹€鈹€examples//椤圭洰绀轰緥缃戠珯|鈹溾攢鈹€App.vue|鈹溾攢鈹€璧勪骇|鈹溾攢鈹€缁勪欢|鈹溾攢鈹€main.js|鈹溾攢鈹€璺敱鍣▅鈹斺攢鈹€views鈹溾攢鈹€src//椤圭洰缁勪欢婧愮爜|鈹溾攢鈹€瀛椾綋|鈹溾攢鈹€index.js|鈹溾攢鈹€璇█鐜|鈹溾攢鈹€娣烽煶|鈹溾攢鈹€鏉ユ簮|鈹溾攢鈹€椋庢牸|鈹斺攢鈹€utils鈹溾攢鈹€public鈹溾攢鈹€package.json閰嶇疆鍩虹vue.config.js椤圭洰榛樿鍏ュ彛./src/main.js锛岄厤缃涓嬶細{entry:{app:['./src/main.js']}}鍦ㄦ牴鐩綍涓嬪垱寤簐ue.config.js锛屼慨鏀归粯璁ら厤缃€俢onstpath=require("璺緞");constresolve=(dir)=>path.join(__dirname,dir);module.exports={configureWebpack:(config)=>{//椤圭洰鍏ュ彛config.entry.app="./examples/main.js";},chainWebpack:(config)=>{//娣诲姞鍒悕config.resolve.alias.set("vue$","vue/dist/vue.esm.js").set("@",resolve("examples")).set("@assets",resolve("examples/assets")).set("@src",resolve("src")).set("@views",resolve("examples/views")).set("@router",resolve("examples/router")).set("@store",resolve("examples/store"));},};杩愯npmrunserve锛岄」鐩綉绔欒繍琛屾甯搞€?x02椤圭洰鏋勫缓npmscripts閰嶇疆锛岃皟鏁磒ackage.json涓殑scripts閰嶇疆鑴氭湰鈥嬧€嬶紝澧炲姞--modexxx閫夋嫨涓嶅悓鐨勭幆澧冮厤缃€?scripts":{//寮€鍙戠幆澧冨惎鍔ㄩ」鐩ず渚嬬綉绔?dev":"vue-cli-serviceserve",//缁勪欢搴撴瀯寤?dist":"vue-cli-servicebuild--modeproduction--targetlib--namevue-code-viewer--destlibsrc/index.js",//椤圭洰绀轰緥缃戠珯build"deploy:build":"vue-cli-servicebuild--modedeploy"}componentbuildcomponentlibrarybuildpass鎸囧畾鍏ュ彛鏂囦欢src/index.js锛岃缃弬鏁伴€夐」銆傜敤娉曪細vue-cli-servicebuild[options][entry|pattern]鍙傛暟閫夐」锛?-mode鎸囧畾鐜妯″紡锛堥粯璁ゅ€硷細production锛?-dest鎸囧畾杈撳嚭鐩綍锛堥粯璁ゅ€硷細dist锛?-targetapp|搴搢鍘曟墍|wc-async(default:app)--namelibraryornameinWebComponentsmode(default:"name"fieldinpackage.jsonorentryfilename)鏋勫缓搴撲細杈撳嚭锛歭ib/vue-code-viewer.common銆俲s锛氱敤浜庢墦鍖呭櫒鐨凜ommonJS鍖呫€俵ib/vue-code-viewer.umd.js锛氱洿鎺ョ敤浜庢祻瑙堝櫒鎴朅MD鍔犺浇鍣ㄧ殑UMD鍖呫€俵ib/vue-code-viewer.umd.min.js锛氱缉灏廢MD鏋勫缓銆俵ib/vue-code-viewer.css锛氭彁鍙栫殑CSS鏂囦欢銆俻ackage.json鏂囦欢涓殑缁勪欢npm鍖呭彂甯冮厤缃睘鎬у€肩敤浜巒pm鍙戝竷銆俷ame锛氬寘鍚嶏紝鍚嶅瓧鏄敮涓€鐨勩€傞渶瑕佸幓npmregistry鏌ョ湅璇ュ悕绉版槸鍚﹀凡琚娇鐢ㄣ€倂ersion锛氬寘鐗堟湰鍙凤紝鐗堟湰鍙疯鍒欏弬鑰冦€婅涔夊寲鐗堟湰 2.0.0銆嬨€傛瘡娆″彂甯冨埌npm锛岄兘闇€瑕佷慨鏀圭増鏈彿锛屼笉鑳藉拰鍘嗗彶鐗堟湰鍙蜂竴鏍枫€俤escription锛氬寘鐨勬弿杩帮紝鎻忚堪杩欎釜鍖呯殑涓昏鍔熻兘鍜岀敤閫斻€俶ain锛氬叆鍙ｆ枃浠讹紝璇ュ瓧娈甸渶瑕佹寚鍚戦」鐩殑缂栬瘧鍖呮枃浠躲€倁npkg锛歎MD妯″紡鍏ュ彛鍖呮枃浠跺叧閿瓧锛氬叧閿瓧锛屾暟缁勶紝瀛楃涓层€俛uthor锛氬寘鐨勪綔鑰呫€俻rivate锛氭棤璁烘槸鍚︾鏈夛紝閮介渶瑕佷慨鏀逛负false锛屾墠鍙互鍙戝竷鍒皀pmlicense锛氬紑婧愬崗璁€俽epository锛氬寘鐨凣itRepo淇℃伅锛屽寘鎷被鍨嬪拰URL銆俬omepage锛氶」鐩畼缃戠殑url銆傛洿鏂皃ackage.json鏂囦欢鍐呭锛歿"name":"vue-code-view","version":"0.3.9","description":"涓€涓熀浜嶸ue.js2鐨勪唬鐮佺紪杈戝櫒缁勪欢",鈥渕ain鈥濓細鈥渓ib/vue-code-viewer.common.js鈥濓紝鈥渦npkg鈥濓細鈥渓ib/vue-code-viewer.umd.js鈥濓紝鈥渟cripts鈥濓細{}锛屸€渄ependencies鈥濓細{}锛屸€減eerDependencies鈥濓細{}锛屸€渄evDependencies鈥濓細{}锛屸€滃叧閿瓧鈥濓細[鈥渧ue鈥濓紝鈥滅粍浠垛€濓紝鈥渃odemirror鈥濓紝鈥滀唬鐮佺紪杈戝櫒鈥漖锛屸€滃瓨鍌ㄥ簱鈥濓細{鈥滅被鍨嬧€濓細鈥済it鈥濓紝"url":"git+https://github.com/andurils/vue-code-view.git"},"author":"andurils","license":"MIT","homepage":"https://andurils.github.io/vue-code-view"}娣诲姞.npmignore鏂囦欢锛岃缃负蹇界暐鍙戝竷鐨勬枃浠躲€傚彂甯冩枃浠跺埌npm锛屽彧淇濈暀宸叉湁鐨刲ib鐩綍銆乸ackage.json銆丷EADME.md銆?蹇界暐鐩綍examples/node_modules/public/build/src/dist/deploy/#蹇界暐鎸囧畾鏂囦欢.browserslistrc.eslintignore.prettierignore.env.env.**.js鎺ヤ笅鏉ュ湪npmjs.com涓婃敞鍐岃处鍙峰苟鐧诲綍鍚庝腑锛屾墽琛宯pmpublish鍛戒护瀹屾垚缁勪欢鍖呭彂甯冩搷浣溿€傚彂甯冩垚鍔熷悗锛岃繘鍏ョ粍浠剁殑npm涓婚〉npm/vue-code-view锛屽彲浠ョ湅鍒颁笂闈㈢殑椤圭洰閰嶇疆淇℃伅銆傞」鐩ず渚嬬綉绔欐瀯寤烘洿鏂皏ue.config.js锛岃繍琛宯pmrundeploy:build鏋勫缓椤圭洰绀轰緥缃戠珯骞惰緭鍑哄埌deploy鐩綍銆俢onstpath=require("璺緞");constresolve=(dir)=>璺緞銆傚姞鍏ワ紙__鐩綍鍚嶏紝鐩綍锛夛紱constIS_PROD=[鈥滅敓浜р€濓紝鈥滀骇鍝佲€漖銆傚寘鎷紙杩囩▼銆傜幆澧冦€侼ODE_ENV锛夛紱妯″潡.exports={publicPath:process.env.VUE_APP_PUBLIC_PATH||鈥?鈥濓紝productionSourceMap锛歠alse锛宱utputDir锛歱rocess.env.VUE_APP_ENV===鈥滈儴缃测€濓紵"deploy":"dist",configureWebpack:(config)=>{//椤圭洰鍏ュ彛config.entry.app="./examples/main.js"},...};鎸佺画闆嗘垚浣跨敤TravisCI鐨勬寔缁泦鎴愭湇鍔¤嚜鍔ㄦ瀯寤洪」鐩ず渚嬬綉绔欏苟閮ㄧ讲鍒癵h-pages鍒嗘敮銆傚湪鏍圭洰褰曚笅娣诲姞.travis.yml鏂囦欢锛屾寚瀹歍ravis鐨勮涓恒€傞€氳繃璁剧疆锛屼竴鏃︿唬鐮佷粨搴撲腑鏈夋柊鐨凜ommit锛孴ravis灏变細鎵惧埌杩欎釜鏂囦欢锛屽苟鎵ц閲岄潰鐨勫懡浠わ紙鎵ц鏋勫缓銆侀儴缃茬瓑锛夈€倅sudo:falselanguage:node_jsnode_js:14install:-绾辩嚎鑴氭湰:npmrundeploy:buildafter_script:-mkdirtemp_web-cdtemp_web-gitclone--depth1-bgh-pages--single-branchhttps://${TravisCI_Token}@${GH_REF}&&cdvue-code-view-echo'copy&&commit'-rm-rfjsfonts-cp-rf../../deploy/**銆?gitconfiguser.name"${U_NAME}"-gitconfiguser.email"${U_EMAIL}"-gitadd-A銆?gitcommit-m":construction_worker:-Build&DeploybyTravisCI"-gitpushorigingh-pages-echo"DONE,Bye~"-exit0TravisCI椤圭洰鏋勫缓鍚庡彴锛氭墦寮€鏋勫缓鍘嬬缉骞跺畨瑁呯浉鍏虫彃浠躲€?gzipwebpack4.x瀵瑰簲6.x鐗堟湰npmicompression-webpack-plugin@6.1.1-D#浠ｇ爜鍘嬬缉npmiuglifyjs-webpack-plugin-D閰嶇疆vue.config.js骞跺惎鐢ㄦ彃浠躲€?..constIS_PROD=["production","prod"].includes(process.env.NODE_ENV);//gzip鍘嬬缉webpack4.x瀵瑰簲鐗堟湰6.xcnpmicompression-webpack-plugin@6.1.1--save-devconstCompressionWebpackPlugin=require("compression-webpack-plugin");constproductionGzipExtensions=/\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;//浠ｇ爜鍘嬬缉constUglifyJsPlugin=require("uglifyjs-webpack-plugin");module.exports={...configureWebpack:(config)=>{constplugins=[];//鐢熶骇鐜鐩稿叧閰嶇疆if(IS_PROD&&process.env.VUE_APP_ENV==="pub"){plugins.push(newCompressionWebpackPlugin({filename:"[path][base].gz",algorithm:"gzip",minRatio:0.99,娴嬭瘯:productionGzipExtensions,deleteOriginalAssets:false,}));plugins.push(newUglifyJsPlugin({uglifyOptions:{//绉婚櫎璇勮杈撳嚭:{comments:false,},//鍒犻櫎鎺у埗鍙拌皟璇曞櫒compress:{drop_debugger:true,drop_console:true,//consolepure_funcs:["console.log"],//鍒犻櫎鎺у埗鍙皚,//鍒犻櫎璀﹀憡warnings:false,},sourceMap:false,parallel:true,//浣跨敤澶氫釜杩涚▼骞惰杩愯鎻愰珮鏋勫缓閫熷害榛樿骞跺彂鏁帮細os.cpus().length-1.}));}config.plugins=[...config.plugins,...plugins];},};缁勪欢鎻忚堪鏂囨。鍙傝€冨厓绱?鐨勫疄鐜帮紝鑷畾涔塨uild/md-loder瑙ｆ瀽娓叉煋Markdown鏂囦欢銆傚皢examples\docs\zh-CN\example.md缂栬瘧涓篐TML銆傚湪涔嬪墠鐨勬枃绔?4.缁勪欢灏佽銆佹墦鍖呭拰缂栧啓鏂囨。涓凡缁忚缁嗕粙缁嶈繃锛岃繖閲屼笉鍐嶈繃澶氳禈杩般€傞厤缃畍ue.config.js涓?md鏂囨。娣诲姞鑷畾涔塎arkdownLoader銆俶odule.exports={...configureWebpack:(config)=>{config.resolveLoader.modules=["node_modules","./build/"];//鑷畾涔夊姞杞藉櫒},chainWebpack:(config)=>{//Markdown鍔犺浇鍣╟onfig.module.rule("md").test(/\.md/).use("vue-loader").loader("vue-loader").end()//鑷畾涔夊姞杞藉櫒.use("md-loader").loader("md-loader").end();},};examples\router\index.js閰嶇疆璺敱锛歝onstroutes=[{path:"/md",name:"Markdown",component:(r)=>require.ensure([],()=>r(require("../docs/zh-CN/example.md"))),},];0x03鏈€鍚庯紝鏈枃涓昏鎸夌収椤圭洰鐨勯『搴忎粠绠€鍗曞埌閫愭璁茶В鍚勪釜鎿嶄綔椤瑰拰璇︾粏閰嶇疆澶嶆潅鐨勩€備笅闈㈣缁嗚鏄庣粍浠跺疄鐜扮殑鍘熺悊銆傛湭瀹屽緟缁瓇
