快捷導(dǎo)航

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

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

這篇文章主要介紹了在vscode中使用腳手架搭建vue項(xiàng)目的相關(guān)資料,包括創(chuàng)建Vue2和Vue3項(xiàng)目,并展示了如何自定義項(xiàng)目配置,如選擇特性、路由模式、CSS預(yù)處理器和工具配置,通過(guò)代碼介紹的非常詳細(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)前的配置保存為一個(gè)預(yù)設(shè)
2.7、配置ESLint配置文件
2.8、到此為止一個(gè)vue2的項(xiàng)目句搭建完成了，啟動(dòng)vue項(xiàng)目

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

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

4、配置vue的啟動(dòng)方式

總結(jié)

前言

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

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

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

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

下面這個(gè)是對(duì)創(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)）

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

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

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

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

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

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

2.3、選擇路由模式

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

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

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

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

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

這個(gè)一般默認(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通常會(huì)使用.babelrc或babel.config.js文件，而ESLint會(huì)使用.eslintrc或eslintrc.js文件。這些配置文件通常位于項(xiàng)目的根目錄中，并且可以為每個(gè)工具提供詳細(xì)的配置選項(xiàng)。這種方法的好處是配置文件更集中、更易于管理，尤其是在大型項(xiàng)目中，可以為不同的工具和環(huán)境提供更細(xì)粒度的控制。

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

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

這里一般選否

2.7、配置ESLint配置文件

下面的.eslintrc文件（ESLint 文件）要使用JSON形式的，因?yàn)樗苊饬伺渲梦募?zhí)行時(shí)的錯(cuò)誤，并且使用了適合項(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": {
    }
}