上一篇vue-cli 介紹與安裝我們安裝了vue-cli，接下來我們就使用該腳手架進行創(chuàng)建項目

1.進入一個目錄，創(chuàng)建項目

創(chuàng)建項目命令如下：

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代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 
 ◯ TypeScript  // TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含并擴展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運行
 ◯ Progressive Web App (PWA) Support  // 漸進式Web應用程序
 ◉ Router  // vue-router（vue路由）
 ◉ Vuex  // vuex（vue的狀態(tài)管理模式）
 ◉ 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代碼驗證規(guī)則

接著選擇 ESLint 代碼校驗規(guī)則，提供一個插件化的javascript代碼檢測工具，ESLint + Prettier 使用較多

2.5 選擇什么時候進行代碼規(guī)則檢測

接著讓你選擇什么時候進行代碼規(guī)則檢測：

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

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

2.6 選擇如何存放配置

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

> In dedicated config files // 獨立文件放置
  In package.json // 放package.json里

2.7 是否保存當前配置

最后就是選擇是否保存剛才所選的配置，以便下次創(chuàng)建其他項目，就不需要再重新一個個去選擇了，我們這里選擇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.項目創(chuàng)建完成

最后出現(xiàn)以下紅框內的successfully就代表我們通過vue-cli腳手架，創(chuàng)建項目成功了

5.輸入npm run serve啟動項目

項目創(chuàng)建完成后，項目目錄如下：

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

啟動完成后，控制臺會出現(xiàn)如下畫面

我們點擊http://localhost:8080/，我們就會在網(wǎng)頁上看到首頁了

6.項目結構解析

我們創(chuàng)建完項目后，必須知道項目的整體結構、項目的每個文件夾和文件是做什么的，接下里詳細介紹下項目結構配置：

項目結構配置：

node_modules

里面存放了項目需要的各種環(huán)境依賴包

public

public里面存放一個網(wǎng)站標簽favicon.ico和index首頁，以后打包時，會把這些文件原封不動的打包到dist文件夾下

src

我們前端寫的源代碼都會在這個文件夾下

.browserslistrc

這個文件是對瀏覽器的一些配置，文件里的內容如下

> 1%
last 2 versions
not dead

一般不需要做修改

.eslintrc.js

代碼風格檢測，如果我們在其中配置了一些代碼規(guī)則，我們寫代碼時出現(xiàn)不符合規(guī)則的代碼，編譯時就會報錯

.gitignore

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

Dockerfile
.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

整個項目對包的配置，都在這里面，還包括了啟動項目命令等等

到此這篇關于vue-cli創(chuàng)建項目及項目結構解析 的文章就介紹到這了,更多相關vue-cli創(chuàng)建項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論