1.檢查node版本
2.檢查vue的版本
3.創(chuàng)建vue-cli的腳手架
vue init webpack jsPlumb
4.選擇安裝的理解
注釋
:(1)這里創(chuàng)建Vue 的項(xiàng)目有幾種荞膘,常見(jiàn)的是:webpack 府适、webpack-simple狞山、browserify悯辙、browserify-simple劣领、simple等等, 一般大型項(xiàng)目主要推薦webpack,而個(gè)人或者是業(yè)務(wù)邏輯并沒(méi)有那么復(fù)雜的話推薦使用webpack-simple
(2)vuefirstdemo:----->表示的是文件名,也就是項(xiàng)目名
(3)Projectname(vuefirstdemo):----->項(xiàng)目名稱姜挺,直接回車,按照括號(hào)中默認(rèn)名字(注意這里的名字不能有大寫(xiě)字母彼硫,如果有會(huì)報(bào)錯(cuò): Sorry,name can no longer contain capital letters 應(yīng)將項(xiàng)目名改為小寫(xiě)(*)
(4)Projectdescription(A Vue.js project):---->項(xiàng)目描述(可寫(xiě)可不寫(xiě))炊豪,也可直接回車,使用默認(rèn)名字
(5)Author():---->作者,看作者自己拧篮,怎么寫(xiě),默認(rèn)也可以词渤。
(6)Runtime+Compiler:recommendedformost users 運(yùn)行加編譯,既然已經(jīng)說(shuō)了推薦串绩,選擇即可推薦是: Runtime-only:about 6KB lighter min+gzip,buttemplates(or any Vue-specificHTML)are ONLY allowedin.vue files-render functions are required elsewhere 僅運(yùn)行時(shí)缺虐,已經(jīng)有推薦了就選擇第一個(gè)了
(7)Install vue-router?(Y/n)是否安裝vue-router,看項(xiàng)目需求赏参,輸入"y",回車則安裝志笼,一般情況下都會(huì)需要到。
(8)Use ESLint to lint your code?(Y/n)是否使用ESLint管理代碼把篓,ESLint是個(gè)代碼風(fēng)格管理工具纫溃,是用來(lái)統(tǒng)一代碼風(fēng)格的,這個(gè)是一個(gè)好的習(xí)慣,使用推薦大家使用韧掩。
(9)Pick an ESLintpreset(Use arrow keys)選擇一個(gè)ESLint預(yù)設(shè)紊浩,編寫(xiě)vue項(xiàng)目時(shí)的代碼風(fēng)格,直接y回車
(10)Setup unit tests with Karma+Mocha?(Y/n)是否安裝單元測(cè)試疗锐,這個(gè)看自己了
(11)Setup e2e tests withNightwatch(Y/n)?是否安裝e2e測(cè)試 坊谁,也是看自己項(xiàng)目,直接回車
5.vue-cli項(xiàng)目目錄
(1).build:---->構(gòu)建項(xiàng)目腳本目錄
(2).config:---->構(gòu)建配置目錄:如端口號(hào)等(
3).node-modules:---->依賴的node庫(kù)文件
(4).src:---->主要源代碼編寫(xiě)地方滑臊, src/assets:----->資源文件口芍,
????????????如:css、img雇卷、js等鬓椭,
?????????????components:----->自定義組件編寫(xiě)位置,
?????????????router:----->路由关划,
?????????????App.vue:----->vue 的根組件小染,
?????????????main.js:----->主函數(shù)入口文件,
(5).static:----->靜態(tài)文件目錄
(6).test:----->測(cè)試文件目錄
(7)..eslintignore和.eslintrc.js:----->ES語(yǔ)法的配置文件
(8).index.html:------>入口文件
(9).package.json:----->項(xiàng)目描述文件
6.運(yùn)行項(xiàng)目
1.npm install
2.npm run dev