直接上乾貨
經過後面流程後得到最新vue cli4.4項目架構:
1、安裝vue cli4
在npm環境下(注意一定配置npm代理,不然下載很慢),執行如下命令:
npm install -g @vue/cli
2、查驗版本
vue --version
3、創建項目 test-web-vue-t1
<1>執行如下命令:
vue create test-web-vue-v0
如下圖:
<2>上下箭頭選擇Manually select features
,之後回車,如圖:
<3>選擇配置(注:空格鍵是選中與取消,A鍵是全選)
選擇如下(選完後,切到最後一行,回車):
<4> 繼續選擇:Use history mode for router?
填寫n
<5>選擇css預處理, Pick a CSS pre-processor
選擇Stylus
如圖:
<6>配置選項Pick a linter / formatter config
,選擇ESLint + Prettier
(更精緻的)
<7>選擇語法檢查方式,這裏我選擇保存就檢測,Pick additional lint features:
選擇Lint on save
<8>選擇單元測試,Pick a unit testing solution:
選擇Jest
<9>選擇babel,postcss,eslint這些配置文件存放位置,選擇放在獨立文件夾,
Where do you prefer placing config for Babel, ESLint, etc.?
選擇In dedicated config files
<10>是否保存預設,我選擇保存,輸入y
,
之後保存名爲: pre-test-vue-test1
<11>回車後開始下載:
漫長等待後,下載成功:
<12>得到如下vue項目框架,結構:
<13>進入項目根目錄,啓動項目
cd test-web-vue-t1
#啓動服務後,會自動把所有依賴裝配到 /public/index.html 文件中,並且生產到 dist/
npm run serve
<14>進入啓動成功後提示網址:http://localhost:8080/
結果如下圖:
總結:如上就是整個vue架構搭建過程。謝謝評鑑。