最新vue cli4構建vue項目架構

直接上乾貨

經過後面流程後得到最新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架構搭建過程。謝謝評鑑。