目前寫過的大多數專案都是cli搭建的, 拿一個簡單的專案結構來詳細說一下每個目錄的作用.

首先建立一個專案需要安裝cli, 命令列全域性npm安裝即可

npm install -g @vue/cli

然後建立一個專案 cli2與cli3的命令是不同的 (project-name就是你的專案名稱)

vue create project-name    // vue-cli3
vue init webpack project-name    //vue-cli2

然後就會根據專案不同需要去配置專案,cli已經有4.0版本了,但是相容性還是不太好,執行專案有時可能會出現報錯,所以安裝的時候可以指定安裝3.x版本

預設模式包含了babel用作語法轉換以及eslint程式碼風格校驗, 可以選擇第二種,根據自己的專案需求去配置cli

用空格選擇項,可以a全選,i反選;

一般Babel是轉換語法必選選項;

typescript根據專案需求,ts檔案轉換為js檔案需要執行tsc js-name;

router, vue路由,通過控制父元件一個路由變數的值，來動態改變指向的元件;

vuex,狀態管理器,當你的專案有多個地方需要用到同一個值的時候,可以用vuex來儲存我們需要管理的狀態值，值一旦被修改，所有引用該值的地方就會自動更新;

CSS Pre-processors, CSS前處理器,可以根據自己的編寫習慣使用less或sass,stylus等編寫,之後轉為css檔案;

Linter,語法檢查器(eslint),可以選擇程式碼風格校驗;

Unit Testing, 單元測試;

E2E Testing, 端到端測試;

根據自己需要選擇項之後,回車進入下一項

vue路由是否選擇history模式,vue的路由有history和hash兩種模式,預設hsah模式,連結後面會攜帶#/,選擇n即預設hash模式;之後根據自己書寫習慣選擇css前處理器.

選中css前處理器後,會進行程式碼風格校驗的選擇

ESLint with error prevention only, eslint僅在有錯誤時提醒;

其餘三項為Airbnb風格,標準模式,美化模式,根據需要,一般選擇standard模式就可以了.

Lint on save，在儲存的時候進行語法檢查。

Lint and fix on commit, 在提交的時候進行語法檢查。

也可以全選.

In dedicated config files 是單獨存放;

In package.json是整合在package.json。

以上是cli的基本選擇配置,其中有兩個我沒有勾選,一個是單元測試，另一個是E2E測試。其實我也並不瞭解,等學習到這裡再研究吧.

單元測試:一個是karma+mocha+chai的方式，一個是jest

E2E測試，端到端測試。e2e測試主要是來測試頁面的業務邏輯，主要注重使用者體驗,一個是nightwatch框架，另一個是Cypress框架

這個就是是否把選項作為將來的預設配置,這個如果每次需要大概一直就可以選Y

配置完成後就可以等待專案建立了,建立成功後,執行命令,進入資料夾,啟動專案,

 cd project-name // 進入資料夾
 npm run serve //啟動專案

這樣就可以在本地8080埠訪問到建立的vue專案了.

在vscode中開啟專案,大概長這個樣子

一個vue專案的手腳架就大致搭建好了