前言

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

1、搭建一個vue項目

vue create '項目名稱'

2、通過自定義搭建vue項目

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

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

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

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

2.1、勾選自定義搭建vue項目的特性

下面是在搭建初始vue項目的時候勾選的選項（通過上下箭頭進行選擇，通過空格確認選擇的特性，Enter鍵進入下一步）

2.2、選擇搭建vue項目的版本（vue2）

下面以搭建vue2的項目進行演示

2.3、選擇路由模式

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

• hash模式：這種模式下，URL中會包含一個#符號，例如http://example.com/#/about。這種模式不需要服務器進行任何特殊配置，因為#后面的部分（即路由路徑）不會被發(fā)送到服務器。瀏覽器只會根據(jù)#后的路徑來渲染相應的視圖。

• history模式：這種模式下，URL看起來更加正常，例如http://example.com/about。這種模式使用HTML5的history.pushStateAPI來改變URL而不刷新頁面。為了讓這種模式在生產(chǎn)環(huán)境中正常工作，服務器需要配置為對所有路由都返回同一個index.html文件，這樣當用戶直接訪問一個路由或者刷新頁面時，服務器可以正確地處理這個請求并返回應用程序的入口文件。

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

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

2.4、使用CSS預處理器

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

2.5、關于Babel、ESLint等配置文件的位置

這里一般選擇In dedicated config files

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

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

2.6、是否將當前的配置保存為一個預設

這里一般選否

2.7、配置ESLint配置文件

下面的.eslintrc文件（ESLint 文件）要使用JSON形式的，因為它避免了配置文件執(zhí)行時的錯誤，并且使用了適合項目實際的解析器和插件。（將下面的json文件粘貼到項目中）

{
    "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": {
    }
}

2.8、到此為止一個vue2的項目句搭建完成了，啟動vue項目 

 $ cd first_vue                進入到vue項目中
 $ npm run serve           啟動vue項目

3、下面是搭建一個vue3的項目

搭建vue3項目類似于vue2項目，下面只對搭建vue3項目時需要改動的地方進行說明

3.1、選擇搭建vue3項目

3.2、搭建的 vue3項目這里并不是在同一個容器中的，所以這里要加一個外層的容器

4、配置vue的啟動方式

在package.json文件中

"serve": "vue-cli-service serve",           啟動項目

 "dev": "vue-cli-service serve",                熱重載啟動

總結 

到此這篇關于在vscode中使用腳手架搭建vue項目的文章就介紹到這了,更多相關腳手架搭建vue項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論