快捷導(dǎo)航

在vscode中使用腳手架搭建vue項(xiàng)目

更新時間：2024年12月11日 11:05:13 作者：去咔噠凱斯聽風(fēng)浪

這篇文章主要介紹了在vscode中使用腳手架搭建vue項(xiàng)目的相關(guān)資料,包括創(chuàng)建Vue2和Vue3項(xiàng)目,并展示了如何自定義項(xiàng)目配置,如選擇特性、路由模式、CSS預(yù)處理器和工具配置,通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

2.1、勾選自定義搭建vue項(xiàng)目的特性
2.2、選擇搭建vue項(xiàng)目的版本（vue2）
2.3、選擇路由模式
2.4、使用CSS預(yù)處理器
2.5、關(guān)于Babel、ESLint等配置文件的位置
2.6、是否將當(dāng)前的配置保存為一個預(yù)設(shè)
2.7、配置ESLint配置文件
2.8、到此為止一個vue2的項(xiàng)目句搭建完成了，啟動vue項(xiàng)目

3、下面是搭建一個vue3的項(xiàng)目

3.1、選擇搭建vue3項(xiàng)目
3.2、搭建的 vue3項(xiàng)目這里并不是在同一個容器中的，所以這里要加一個外層的容器

4、配置vue的啟動方式

總結(jié)

前言

使用腳手架3（Vue CLI 3）來搭建vue項(xiàng)目，通過Vue CLI 3可以搭建vue2項(xiàng)目也可以搭建vue3項(xiàng)目，下面將通過在vscode中演示如何使用Vue CLI 3來搭建vue項(xiàng)目，在vue_cli_vue1目錄下使用Vue CLI 3創(chuàng)建一個名為first_vue的vue項(xiàng)目。

1、搭建一個vue項(xiàng)目

vue create '項(xiàng)目名稱'

2、通過自定義搭建vue項(xiàng)目

下面這個是對創(chuàng)建vue項(xiàng)目的方式進(jìn)行選擇，下面主要講解下面三種方式

Default ([Vue 3] babel, eslint) 創(chuàng)建vue3項(xiàng)目（默認(rèn)配置）
Default ([Vue 2] babel, eslint) 創(chuàng)建vue2項(xiàng)目（默認(rèn)配置）
Manually select features 自定義的方式搭建vue項(xiàng)目（重點(diǎn)）

下面呢主要對如何自定義配置vue項(xiàng)目來進(jìn)行講解（通過上下箭頭進(jìn)行選擇，Enter鍵確定那種搭建模式）

Babel: 一個轉(zhuǎn)譯器，用于將ES6+代碼轉(zhuǎn)換成向后兼容的JavaScript版本，以便在不支持最新JavaScript特性的舊瀏覽器中運(yùn)行。
TypeScript: 一種由微軟開發(fā)的開源編程語言，它是JavaScript的一個超集，添加了靜態(tài)類型選項(xiàng)。
Progressive Web App (PWA) Support: 一組技術(shù)，用于創(chuàng)建離線優(yōu)先、應(yīng)用程序般的網(wǎng)絡(luò)體驗(yàn)。
Router: Vue Router，Vue.js的官方路由管理器，用于構(gòu)建單頁面應(yīng)用。
Vuex: Vue.js的官方狀態(tài)管理庫，用于在大型應(yīng)用中管理狀態(tài)。
CSS Pre-processors: CSS預(yù)處理器，如Sass或Less，提供更強(qiáng)大的樣式編寫能力。
Linter / Formatter: 代碼質(zhì)量和格式檢查工具，如ESLint，用于保持代碼的一致性和避免錯誤。
Unit Testing: 單元測試框架，如Jest或Mocha，用于測試應(yīng)用中的小部分功能。
E2E Testing: 端到端測試框架，如Cypress或Nightwatch，用于測試應(yīng)用從開始到結(jié)束的完整流程。

2.1、勾選自定義搭建vue項(xiàng)目的特性

下面是在搭建初始vue項(xiàng)目的時候勾選的選項(xiàng)（通過上下箭頭進(jìn)行選擇，通過空格確認(rèn)選擇的特性，Enter鍵進(jìn)入下一步）

2.2、選擇搭建vue項(xiàng)目的版本（vue2）

下面以搭建vue2的項(xiàng)目進(jìn)行演示

2.3、選擇路由模式

在Vue.js項(xiàng)目中，使用Vue Router時，有兩種路由模式可供選擇：hash模式和history模式。

hash模式：這種模式下，URL中會包含一個#符號，例如http://example.com/#/about。這種模式不需要服務(wù)器進(jìn)行任何特殊配置，因?yàn)?code>#后面的部分（即路由路徑）不會被發(fā)送到服務(wù)器。瀏覽器只會根據(jù)#后的路徑來渲染相應(yīng)的視圖。
history模式：這種模式下，URL看起來更加正常，例如http://example.com/about。這種模式使用HTML5的history.pushStateAPI來改變URL而不刷新頁面。為了讓這種模式在生產(chǎn)環(huán)境中正常工作，服務(wù)器需要配置為對所有路由都返回同一個index.html文件，這樣當(dāng)用戶直接訪問一個路由或者刷新頁面時，服務(wù)器可以正確地處理這個請求并返回應(yīng)用程序的入口文件。

在Vue CLI項(xiàng)目中，當(dāng)詢問“? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)”時，它是在詢問你是否希望使用history模式作為Vue Router的默認(rèn)路由模式。如果你選擇“Y”，則需要在生產(chǎn)環(huán)境中正確配置服務(wù)器，以便在沒有明確匹配的路由時，服務(wù)器能夠返回應(yīng)用程序的index.html文件。這通常涉及到在服務(wù)器上設(shè)置一個回退路由，該路由會捕獲所有未知的URL并將其重定向到index.html。

簡而言之，如果你選擇“Y”，則需要確保服務(wù)器配置能夠支持history模式，否則用戶在直接訪問路由或刷新頁面時可能會遇到404錯誤。如果你不確定如何配置服務(wù)器，或者你的項(xiàng)目不需要那么干凈的路由URL，可以選擇“n”使用默認(rèn)的hash模式。

2.4、使用CSS預(yù)處理器

這個一般默認(rèn)選擇Sass/SCSS (with dart-sass)就行

2.5、關(guān)于Babel、ESLint等配置文件的位置

這里一般選擇In dedicated config files

In dedicated config files：這意味著您希望為Babel、ESLint等工具使用單獨(dú)的配置文件。例如，Babel通常會使用.babelrc或babel.config.js文件，而ESLint會使用.eslintrc或eslintrc.js文件。這些配置文件通常位于項(xiàng)目的根目錄中，并且可以為每個工具提供詳細(xì)的配置選項(xiàng)。這種方法的好處是配置文件更集中、更易于管理，尤其是在大型項(xiàng)目中，可以為不同的工具和環(huán)境提供更細(xì)粒度的控制。

In package.json：這意味著您希望將所有配置信息放在package.json文件中。package.json是Node.js項(xiàng)目的配置文件，它不僅可以包含項(xiàng)目的依賴信息和腳本，還可以包含Babel、ESLint等工具的配置。這種方法的好處是所有的配置都集中在一個地方，但是可能會導(dǎo)致package.json文件變得非常龐大和復(fù)雜，難以管理。

2.6、是否將當(dāng)前的配置保存為一個預(yù)設(shè)

這里一般選否

2.7、配置ESLint配置文件

下面的.eslintrc文件（ESLint 文件）要使用JSON形式的，因?yàn)樗苊饬伺渲梦募?zhí)行時的錯誤，并且使用了適合項(xiàng)目實(shí)際的解析器和插件。（將下面的json文件粘貼到項(xiàng)目中）

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}