目錄

• 1.進入一個目錄，建立專案
• 2.選擇你需要的配置項
• 2.1 選擇版本
• 2.2 選擇選擇是否使用history router
• 2.3 選擇 前處理器
• 2.4 選擇Eslint程式碼驗證規則
  
• 2.5 選擇什麼時候進行程式碼規則檢測
• 2.6 選擇如何存放配置
• 2.7 是否儲存當前配置
• 3.專案的配置圖
• 4.專案建立完成
• 5.輸入npm run serve啟動專案
• 6.專案結構解析

上一篇vue-cli 介紹與安裝我們安裝了vue-cli，接下來我們就使用該腳手架進行建立專案

1.進入一個目錄，建立專案

建立專案命令如下：

vue create <Project Name> //檔名 不支援駝峰（含大寫字母）

輸入完命令後，會讓你選擇一個preset

我們可以看到，預設有3個選項：

• 預設的包含了基本的 Babel + ESLint 設定的 preset(Vue2版本)
• 預設的包含了基本的 Babel + ESLint 設定的 preset(Vue3版本)
• Manually select features 是自定義配置
  

我們選擇第3個自定義配置

2.選擇你需要的配置項

接著我們會跳轉到配置項中，我的自定義配置如下：

具體解釋如下：

 ◉ Choose Vue version  // 選擇vue的版本
 ◉ Babel  // 轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行。 
 ◯ TypeScript  // TypeScript是一個（字尾.）的超集（字尾.ts）包含並擴充套件了 Script 的語法，需要被編譯輸出為 JavaScript在瀏覽器執行
 ◯ Progressive Web App (PWA) Support  // 漸進式Web應用程式
 ◉ Router  // vue-router（vue路由）
 ◉ Vuex  // vuex（vue的狀態管理模式）
 ◉ CSS Pre-processors  // CSS 前處理器（如：less、sass）
 ◉ Linter / Formatter  // 程式碼風格檢查和格式化（如：ESlint）
 ◯ Unit Testing
 ◯ E2E Testing

配置選好後，我們按下回車進行下一步

2.1 選擇vue版本

接著我們需要選擇vue版本，這裡選用vue2.x版本

選擇完畢後，按下回車下一步

2.2 選擇選擇是否使用history router

接著會問我們是否使用history router，其實直白來說就是是否路徑帶 # 號，建議選擇 n，否則伺服器還要QgFjjRM進行配置

2.3 選擇css 前處理器

csQgFjjRMs 的前處理器我選擇的是 Sass/SCSS(with dart-sass) 。node-sass是自動編譯實時的，dart-sass需要儲存後才會生效

2.4 選擇Eslint程式碼驗證規則

接著選擇 ESLint

2.5 選擇什麼時候進行程式碼規則檢測

接著讓你選擇什麼時候進行程式碼規則檢測：

( ) Lint on save // 儲存就檢測
( ) Lint and fix on commit // fix和commit時候檢查

建議選擇儲存就檢測，等到commit的時候，問題可能都已經積累很多了。

2.6 選擇如何存放配置

接著選擇某些配置檔案是獨立存放到檔案中，還是全部存放到package.json，我們這裡建議第一個

> In dedicated config files // 獨立檔案放置
  In package.json // 放package.json裡

2.7 是否儲存當前配置

最後就是選擇是www.cppcns.com否儲存剛才所選的配置，以便下次建立其他專案，就不需要再重新一個個去選擇了，我們這裡選擇y，就會讓我們輸入儲存配置資訊的名字

那麼我們儲存後，配置到底是儲存到了哪個資料夾？

回答：是放到了我們使用者目錄下的.vuerc檔案下，我們切換到使用者目錄，使用命令cat .vuerc，

配置資訊如下：

{
  "useTaobaoRegistry": true,"latestVersion": "4.5.13","lastChecked": 1626320210348,"presets": {
    "testVueCli": {
      "useConfigFiles": true,"plugins": {
        "@vue/cli-plugin-babel": {},"@vue/cli-plugin-router": {
          "historyMode": false
        },  "@vue/cli-plugin-vuex": {},"@vue/cli-plugin-eslint": {
          "config": "prettier","lintOn": [
            "save"
          ]
        }
      },"vueVersion": "2","cssPreprocessor": "dart-sass"
    }
  }
}% 

這裡就是我們剛才設定的配置資訊，如果我們想把配置刪除，只需要把presets中的資訊刪除即可

3.專案的配置圖

這裡展示我們剛才所填的所有選項的圖片

4.專案建立完成

最後出現以下紅框內的successfully就代表我們通過vue-cli腳手架，建立專案成功了

5.輸入npm run serve啟動專案

專案建立完成後，專案目錄如下：

我們直接進入package.json中，我們直接點選serve左邊的啟動按鈕，點選run serve，webstorm會自動幫我們啟動專案

啟動完成後，控制檯會出現如下畫面

我們點選http://localhost:8080/，我們就會在上看到首頁了

6.專案結構解析

我們建立完專案後，必須知道專案的整體結構、專案的每個資料夾和檔案是做什麼的，接下里詳細介紹下專案結構配置：

專案結構配置：

node_modules

裡面存放了專案需要的各種環境依賴包

public

public裡面存放一個標籤favicon.ico和index首頁，以後打包時，會把這些檔案原封不動的打包到dist資料夾下

src

我們前端寫的原始碼都會在這個資料夾下

.browserslistrc

這個檔案是對瀏覽器的一些配置，檔案裡的內容如下

> 1%
last 2 versions
not dead

一般不需要做修改

.eslintrc.js

程式碼風格檢測，如果我們在其中配置了一些程式碼規則，我們寫程式碼時出現不符合規則的程式碼，編譯時就會報錯

.gitignore

這個檔案是使用git上傳時，對某些檔案忽略，內容如下：

file
.DS_Store
nohttp://www.cppcns.comde_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

如果你把整個專案上傳到git伺服器，那麼以上字尾的檔案都不會進行上傳

bable.config.js

對bable進行配置的檔案，一般不做修改

package.json

整個專案對包的配置，都在這裡面，還包括了啟動專案命令等等

到此這篇關於vue-cli建立專案及專案結構解析 的文章就介紹到這了,更多相關vue-cli建立專案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！