vue（16）vue-cli建立專案以及專案結構解析

Silent丿丶黑羽發表於2021-07-15
Vue

vue-cli建立專案

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

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

建立專案命令如下：

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

輸入完命令後，會讓你選擇一個preset
vue（16）vue-cli建立專案以及專案結構解析
我們可以看到，預設有3個選項

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

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

2.選擇你需要的配置項

接著我們會跳轉到配置項中，我的自定義配置如下：
vue（16）vue-cli建立專案以及專案結構解析
具體解釋如下：

 ◉ Choose Vue version  // 選擇vue的版本
 ◉ Babel  // 轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行。 
 ◯ TypeScript  // TypeScript是一個JavaScript（字尾.js）的超集（字尾.ts）包含並擴充套件了 JavaScript 的語法，需要被編譯輸出為 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，否則伺服器還要進行配置

 

2.3 選擇css 前處理器

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

 

2.4 選擇Eslint程式碼驗證規則

接著選擇 ESLint 程式碼校驗規則，提供一個外掛化的javascript程式碼檢測工具，ESLint + Prettier 使用較多

 

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 是否儲存當前配置

最後就是選擇是否儲存剛才所選的配置，以便下次建立其他專案，就不需要再重新一個個去選擇了，我們這裡選擇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啟動專案

專案建立完成後，專案目錄如下：
vue（16）vue-cli建立專案以及專案結構解析
我們直接進入package.json中，我們直接點選serve左邊的啟動按鈕，點選run serve，webstorm會自動幫我們啟動專案
vue（16）vue-cli建立專案以及專案結構解析
啟動完成後，控制檯會出現如下畫面

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

 

6.專案結構解析

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

node_modules

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

public

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

src

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

.browserslistrc

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

> 1%
last 2 versions
not dead

一般不需要做修改
 

.eslintrc.js

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

.gitignore

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

.DS_Store
node_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

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

相關文章