Vue、J2ee -> 001 : Vue專案的建立過程
使用命令列的方式,通過vue-cli的腳手架進行模板下載打包:
1 、安裝node.js環境,檢視node版本並確認是否安裝成功【node -v】
2、安裝WebStorm開發工具(使用WebStorm來開發Vue專案)
3、在WebStorm中直接引入Vue.js檔案就可以進行開發測試
a、和使用eclipse進行開發無二差別
b、但是可以在WebStorm中可以時間檢視開發情況,不用象eclips還需要啟動tomcat伺服器,WebStorm記憶體類似tomcat的伺服器
4、以上只是Vue.js的簡單使用,還不屬於Vue專案。
5、建立Vue專案(通過腳手架下載模板專案,在模板專案基礎之上進行開發)
a、需要node環境,上面已經安裝
b、需要vue-cli腳手架,用於打包、測試、部署...Vue專案
安裝命令【npm install -g vue-cli】,檢視版本號及是否安裝成功【vue -V】
c、Vue模板的下載,有多個模板可供下載,常用模板【webpack】
下載命令【vue init webpack 專案名稱(不能有大寫字母存在)】
安裝過程(引數都有預設值,也可以修改):
01、專案名稱提示
02、描述
03、作者
04、是否使用vue-roter路由,如果不使用可以不安裝
05、是否需要ESLint,一般都需要
06、是否需要單元測試庫,如果是基於功能測試可以不需要
07、與06類似
08、使用什麼方式下載,也可以手動下載
09、如果上面選擇了手動下載會直接退出。
10、如果選擇手動下,會直接退出花前月下給出手動下載的步驟
cd 專案名稱
npm install(or if using yarn: yarn)
npm run lint -- -- fix (or for yarn: yarn rum lint -- fix)
npm run dev
上面的意思是需要進入到專案目錄資料夾下進行操作
使用npm install命令進行下載,這個比較耗時
執行npm run lint -- -- fix
進行打包、並且執行【npm run dev】,完成之後會給出訪問地址,在瀏覽器中使用給出的地址進行訪問
以下是部分圖片