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

1.進(jìn)入一個(gè)目錄，創(chuàng)建項(xiàng)目

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

vue create <Project Name> //文件名 不支持駝峰（含大寫(xiě)字母）

輸入完命令后，會(huì)讓你選擇一個(gè)preset

我們可以看到，默認(rèn)有3個(gè)選項(xiàng)：

• 默認(rèn)的包含了基本的 Babel + ESLint 設(shè)置的 preset(Vue2版本)
• 默認(rèn)的包含了基本的 Babel + ESLint 設(shè)置的 preset(Vue3版本)
• Manually select features 是自定義配置
  

我們選擇第3個(gè)自定義配置

2.選擇你需要的配置項(xiàng)

接著我們會(huì)跳轉(zhuǎn)到配置項(xiàng)中，我的自定義配置如下：

具體解釋如下：

 ◉ Choose Vue version  // 選擇vue的版本
 ◉ Babel  // 轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 
 ◯ TypeScript  // TypeScript是一個(gè)JavaScript（后綴.js）的超集（后綴.ts）包含并擴(kuò)展了 JavaScript 的語(yǔ)法，需要被編譯輸出為 JavaScript在瀏覽器運(yùn)行
 ◯ Progressive Web App (PWA) Support  // 漸進(jìn)式Web應(yīng)用程序
 ◉ Router  // vue-router（vue路由）
 ◉ Vuex  // vuex（vue的狀態(tài)管理模式）
 ◉ CSS Pre-processors  // CSS 預(yù)處理器（如：less、sass）
 ◉ Linter / Formatter  // 代碼風(fēng)格檢查和格式化（如：ESlint）
 ◯ Unit Testing
 ◯ E2E Testing

配置選好后，我們按下回車進(jìn)行下一步

2.1 選擇vue版本

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

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

2.2 選擇選擇是否使用history router

接著會(huì)問(wèn)我們是否使用history router，其實(shí)直白來(lái)說(shuō)就是是否路徑帶 # 號(hào)，建議選擇 n，否則服務(wù)器還要進(jìn)行配置

2.3 選擇css 預(yù)處理器

css 的預(yù)處理器我選擇的是 Sass/SCSS(with dart-sass) 。node-sass是自動(dòng)編譯實(shí)時(shí)的，dart-sass需要保存后才會(huì)生效

2.4 選擇Eslint代碼驗(yàn)證規(guī)則

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

2.5 選擇什么時(shí)候進(jìn)行代碼規(guī)則檢測(cè)

接著讓你選擇什么時(shí)候進(jìn)行代碼規(guī)則檢測(cè)：

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

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

2.6 選擇如何存放配置

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

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

2.7 是否保存當(dāng)前配置

最后就是選擇是否保存剛才所選的配置，以便下次創(chuàng)建其他項(xiàng)目，就不需要再重新一個(gè)個(gè)去選擇了，我們這里選擇y，就會(huì)讓我們輸入保存配置信息的名字

那么我們保存后，配置到底是保存到了哪個(gè)文件夾？

回答：是放到了我們用戶目錄下的.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"
    }
  }
}% 

這里就是我們剛才設(shè)置的配置信息，如果我們想把配置刪除，只需要把presets中的信息刪除即可

3.項(xiàng)目的配置圖

這里展示我們剛才所填的所有選項(xiàng)的圖片

4.項(xiàng)目創(chuàng)建完成

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

5.輸入npm run serve啟動(dòng)項(xiàng)目

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

我們直接進(jìn)入package.json中，我們直接點(diǎn)擊serve左邊的啟動(dòng)按鈕，點(diǎn)擊run serve，webstorm會(huì)自動(dòng)幫我們啟動(dòng)項(xiàng)目

啟動(dòng)完成后，控制臺(tái)會(huì)出現(xiàn)如下畫(huà)面

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

6.項(xiàng)目結(jié)構(gòu)解析

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

項(xiàng)目結(jié)構(gòu)配置：

node_modules

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

public

public里面存放一個(gè)網(wǎng)站標(biāo)簽favicon.ico和index首頁(yè)，以后打包時(shí)，會(huì)把這些文件原封不動(dòng)的打包到dist文件夾下

src

我們前端寫(xiě)的源代碼都會(huì)在這個(gè)文件夾下

.browserslistrc

這個(gè)文件是對(duì)瀏覽器的一些配置，文件里的內(nèi)容如下

> 1%
last 2 versions
not dead

一般不需要做修改

.eslintrc.js

代碼風(fēng)格檢測(cè)，如果我們?cè)谄渲信渲昧艘恍┐a規(guī)則，我們寫(xiě)代碼時(shí)出現(xiàn)不符合規(guī)則的代碼，編譯時(shí)就會(huì)報(bào)錯(cuò)

.gitignore

這個(gè)文件是使用git上傳時(shí)，對(duì)某些文件忽略，內(nèi)容如下：

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?

如果你把整個(gè)項(xiàng)目上傳到git服務(wù)器，那么以上后綴的文件都不會(huì)進(jìn)行上傳

bable.config.js

對(duì)bable進(jìn)行配置的文件，一般不做修改

package.json

整個(gè)項(xiàng)目對(duì)包的配置，都在這里面，還包括了啟動(dòng)項(xiàng)目命令等等

到此這篇關(guān)于vue-cli創(chuàng)建項(xiàng)目及項(xiàng)目結(jié)構(gòu)解析 的文章就介紹到這了,更多相關(guān)vue-cli創(chuàng)建項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論