vue webpack 配置 vue腳手架(以下命令均在cdm里操作霸株,步驟具體如下)
1)cnpm i vue-cli -g (安裝vue所需配置)
2)cd 路徑 回車(chē) (進(jìn)入項(xiàng)目里,如不在c盤(pán)爷狈,先轉(zhuǎn)盤(pán)殉挽,如? d:回車(chē)-》進(jìn)入到d盤(pán)丰涉,再cd 路徑 回車(chē))
3)vue init webpack vue2? (vue init (初始化)用webpack創(chuàng)建一個(gè)項(xiàng)目,項(xiàng)目名叫vue2)
會(huì)問(wèn):?Project name (vue2)? ? 項(xiàng)目名確認(rèn)斯碌,不改就回車(chē)
? ? ? ? ? 一死?Project description (A Vue.js project)? 項(xiàng)目描述 可以先寫(xiě)點(diǎn)描述(英文寫(xiě))回車(chē)
? ? ? ? ? ?Author? 作者:可寫(xiě)自己名(英文)傻唾,不寫(xiě)就回車(chē)
? ? ? ? ? 投慈?Vue build (Use arrow keys)
? ? ? ? ? ? >Runtime + Compiler: recommended for most users
? ? ? ? ? ? (是否安裝Runtime+Compiler:recommended for most users? )? ? 直接回車(chē) 推薦選第一個(gè)
? ? ? ? ? ?Install vue-router? Y 回車(chē) (是否下載路由) y 回車(chē)
? ? ? ? ? 冠骄?Use ESLint to lint your code? N 回車(chē) (檢查代碼是否規(guī)范) n 回車(chē)
? ? ? ? ? 伪煤?Set up unit tests(Y/N)? (單元測(cè)試)? n 回車(chē)
? ? ? ? ? ?Setup e2e tests with Nightwatch? n 回車(chē)
? ? ? ? ? 凛辣?Should we run npm `install` for you after the project has been created?? (recommended)
? ? ? ? ? ? yes,use NPM
? ? ? ? ? ? yes,use Yarn
? ? ? ? ? ? No,I will handle that myself? ?
? ? ? ? ? ? ? 此處用上下鍵控制抱既,選擇最后一項(xiàng)No,will handle that myself? 回車(chē)?
? ? ? ? ? ? ? 之前建立的文件夾中會(huì)生成vue2文件夾? ? ? ?
4)cd vue2 (進(jìn)入vue2)
5)cnpm i (下載)
6)cnpm run dev? (平時(shí)看效果時(shí)輸入)----------------------------------------------------------------------------
? ? (彈出網(wǎng)址,可以復(fù)制放在網(wǎng)頁(yè)上訪問(wèn)? Your application is running here: http://localhost:8080)
? ? ? 訪問(wèn)后出現(xiàn)vue頁(yè)面扁誓,這個(gè)8080的控制臺(tái)一直開(kāi)著防泵,當(dāng)服務(wù)器用,否則8080無(wú)法訪問(wèn)了
7)cnpm run build( 最后開(kāi)發(fā)完成時(shí)蝗敢,用webpack打包導(dǎo)出:執(zhí)行后多了個(gè)dist文件夾捷泞,這些是最后需要的文件)
vue2文件夾簡(jiǎn)單介紹:
? ? ? ? ? build文件夾是最后要怎樣去創(chuàng)建,是webpack里的前普,用來(lái)幫助打包文件
? ? ? ? ? config文件夾:怎樣去打包肚邢,所有配置文件都在里面
? ? ? ? ? src文件夾:是我們寫(xiě)代碼的地方,里面的assets文件夾是放靜態(tài)資源的;components文件夾是放組件的骡湖;router文件夾是路由贱纠,里面是路由的配置信息;App.vue是全局的組件响蕴,
? ? ? ? ? static文件夾:放靜態(tài)資源谆焊,比如以后要放的包
? ? ? ? ? .babelrc文件,將ES6轉(zhuǎn)成html5
? ? ? ? ? package.json文件:記錄了項(xiàng)目需要的文件浦夷,依賴(lài)項(xiàng)
? ? ? ? ? README.md文件:文檔辖试,簡(jiǎn)書(shū)
? ? ? ? ? index.html:文件入口