vue(16)vue-cli建立專案以及專案結構解析

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

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 servewebstorm會自動幫我們啟動專案
vue(16)vue-cli建立專案以及專案結構解析
啟動完成後,控制檯會出現如下畫面

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

 

6.專案結構解析

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

node_modules

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

public

public裡面存放一個網站標籤favicon.icoindex首頁,以後打包時,會把這些檔案原封不動的打包到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

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

相關文章