Vue 可以說是非常流行了，至少在國內(nèi)是這樣，他是個輕量級的 JavaScript 框架，非常適合構(gòu)建大型和中小型的 Web 應(yīng)用程序，如果想和前端打交道，應(yīng)該繞不過這個框架吧。
目錄
1?Vue.js 介紹
2??IDE 選擇
2.1 vscode
2.2?WebStorm
2.3?Eclipse
3??創(chuàng)建 Vue 應(yīng)用
3.1 本地腳手架創(chuàng)建
① 安裝腳手架
②?安裝依賴并啟動
3.2 PyCharm快速創(chuàng)建
① 安裝 vue 插件
② Pycharm 創(chuàng)建 Vue 項目
③ 目錄結(jié)構(gòu)
1?Vue.js 介紹
Vue.js（常簡稱為 Vue）是一個開源的漸進式 JavaScript 框架，用于構(gòu)建用戶界面。Vue.js 的設(shè)計理念是易于上手，便于集成到其他項目中，并且能夠逐漸地擴展到復雜的單頁應(yīng)用程序 (SPA) 中。Vue.js 采用了響應(yīng)式數(shù)據(jù)綁定和組件化的思想，使得開發(fā)者可以快速地構(gòu)建交互式的 Web 應(yīng)用程序。
???主要特點
- 響應(yīng)式數(shù)據(jù)綁定：Vue.js 提供了一套響應(yīng)式數(shù)據(jù)綁定的機制，使得數(shù)據(jù)和視圖能夠自動保持同步。當數(shù)據(jù)發(fā)生變化時，視圖會自動更新，反之亦然。
- 組件化：Vue.js 將 UI 拆分成一個個獨立的可復用的組件，每個組件都包含了自己的視圖、數(shù)據(jù)和行為邏輯。這樣可以提高代碼的復用性和可維護性，并且能夠更好地組織代碼和管理項目結(jié)構(gòu)。
- 模板語法：Vue.js 提供了一套簡單易用的模板語法，可以幫助開發(fā)者快速地構(gòu)建交互式的 Web 應(yīng)用程序。
- 輕量級：Vue.js 體積小巧，文件大小只有 20KB 左右，同時也非?？焖?。
- 生態(tài)豐富：Vue.js 生態(tài)圈非常豐富，包括了大量的插件、組件庫和工具等，可以幫助開發(fā)者更快地構(gòu)建 Web 應(yīng)用程序。
- ...
???學習Vue前提
- 掌握 HTML、CSS 和 JavaScript，這是前端開發(fā)的基礎(chǔ)。
- 了解 ES6+語法，Vue 使用了許多 ES6+ 的語法，包括箭頭函數(shù)、模板字符串、解構(gòu)賦值等。
- 了解前端框架的概念和原理，例如組件化、狀態(tài)管理、路由等等。
Vue 相對來說還是很友好的，零基礎(chǔ)的話建議先學下 HTML、CSS 和 JavaScript，了解頁面的布局及元素相關(guān)。
Vue 2 將于 2023 年 12 月 31 日停止維護，因此本專欄將介紹更新 Vue 3，以下是 2 和 3 的一些區(qū)別。
???Vue 2 & Vue 3 區(qū)別
- 性能提升：Vue3 在編譯器、運行時和渲染器方面進行了許多優(yōu)化，使得整個框架的性能得到了顯著提升。
- Composition API：Vue3 引入了 Composition API，可以更靈活地組織組件邏輯，提高代碼的可讀性和可維護性。
- 更好的 TypeScript 支持： Vue3 對 TypeScript 的支持更加完善，可以提供更好的類型檢查和代碼提示。
- 更好的組件封裝：Vue3 改進了組件封裝機制，使得組件之間的耦合度更低，更容易復用和維護。
- 更好的響應(yīng)式系統(tǒng)：Vue3 的響應(yīng)式系統(tǒng)使用了 Proxy 對象，可以解決 Vue2 中存在的一些問題，如對于數(shù)組和對象的監(jiān)聽問題。
2??IDE 選擇
IDE（Integrated Development Environment），也就是集成開發(fā)環(huán)境，或者說編譯器，方便程序員開發(fā)、編寫、測試和調(diào)試軟件，比如Eclipse、Visual Studio、IntelliJ IDEA 等，這年頭，誰還不用 IDE 進行開發(fā)呢~?
官方推薦使用 Visual Studio Code + Volar 擴展（插件），可以說這是前端開發(fā)的標配了，由于我習慣使用 JetBrains 全家桶（比如 IDEA、PyCharm），因此本人使用 PyCharm 搭配 Vue.js 插件進行學習（當然 JetBrains 旗下的 WebStorm 就是專業(yè)的前端編譯器，但我并不從事前端，因此 PyCharm 足夠了）。然后介紹一下主流的幾個 IDE 供大家選擇 ??
2.1 vscode
Visual Studio Code 簡稱 vscode，是一個跨平臺的免費代碼編輯器，為 Vue.js 提供了很好的支持，使用 Visual Studio Code + Volar 擴展即可支持 Vue 開發(fā)。
下載地址：Visual Studio Code - Code Editing. Redefined
2.2?WebStorm
WebStorm 是 JetBrains 公司開發(fā)的 JavaScript IDE，提供了很好的 Vue.js 支持，包括語法高亮、代碼自動完成和調(diào)試器。分為社區(qū)版和專業(yè)版，后者是付費的，但相應(yīng)的功能也更強大。
下載地址：WebStorm: The Smartest JavaScript IDE, by JetBrains
2.3?Eclipse
Eclipse 類似于 vscode，也是開源免費的，提供了一系列的工具和插件，以幫助程序員開發(fā)、調(diào)試、測試和部署應(yīng)用程序。
其他 IDE 類似，Sublime Text、vim / Neovim、Atom 等都可自行去了解~
3??創(chuàng)建 Vue 應(yīng)用
前提是已安裝 16.0 或更高版本的?Node.js，因為本系列是通過腳手架創(chuàng)建 vue 應(yīng)用，他需要 node.js 的?npm 功能，本人 windows 系統(tǒng)以供參考。
?? 驗證 node 版本
使用電腦的命令行提示符/終端，輸入 node -v，查看 node 版本 ??，?這說明 node 安裝成功并且版本正確，可進行下一步。
3.1 本地腳手架創(chuàng)建
此方案依靠電腦的命令行提示符/終端，不需要IDE參與（vscode也可使用此方式）~
① 安裝腳手架
npm init vue@latest這一指令將會安裝并執(zhí)行 create-vue，它是 Vue 官方的項目腳手架工具。你將會看到一些諸如 TypeScript 和測試支持之類的可選功能提示：
? Project name: … <your-project-name>
? Add TypeScript? … No / Yes
? Add JSX Support? … No / Yes
? Add Vue Router for Single Page Application development? … No / Yes
? Add Pinia for state management? … No / Yes
? Add Vitest for Unit testing? … No / Yes
? Add Cypress for both Unit and End-to-End testing? … No / Yes
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.如果不確定是否要開啟某個功能，你可以直接按下回車鍵選擇?No。
②?安裝依賴并啟動
在項目被創(chuàng)建后，通過以下步驟安裝依賴并啟動開發(fā)服務(wù)器：
cd <your-project-name>
npm install
npm run dev此時已經(jīng)運行起來了你的 Vue 項目！同時該項目也已在對應(yīng)的路徑創(chuàng)建成功，相應(yīng)的 IDE 直接打開該項目進行開發(fā)。?
3.2 PyCharm快速創(chuàng)建
我使用的是 PyCharm，其他 IDE 的話也類似。
① 安裝 vue 插件
由于我使用的是專業(yè)版，可以看到 Vue.js 已經(jīng)安裝好了。
設(shè)置 JavaScript（File -> Settings… -> Languages & Frameworks -> JavaScript），保證其版本大于 6，這樣會支持 vue 語法。
② Pycharm 創(chuàng)建 Vue 項目
File -> New Project… -> Vue.js，填寫 Vue 項目創(chuàng)建位置和名稱，可以看到這里已經(jīng)設(shè)置了 node 解釋器和腳手架。
點擊創(chuàng)建后，IDE 將自動創(chuàng)建該 Vue 項目，我這還會詢問執(zhí)行?npm install ，最終項目結(jié)構(gòu)如下：
右邊紅框內(nèi)為腳本，從上至下分別是啟動腳本、打包構(gòu)建腳本和預覽腳本，對應(yīng) npm 命令如下：
- "dev": "vite"：npm run dev
- "build": "vite build"：npm run build
- "preview": "vite preview"：npm run preview
也就是說，點擊這幾個按鈕和在終端執(zhí)行對應(yīng)命令的作用是一樣的，此時我們點擊 "dev": "vite" 這個按鈕 ??
此時訪問?http://localhost:5173/，出現(xiàn)該初識默認頁面，說明 Vue 項目啟動成功！
文章來源：http://www.zghlxwxcb.cn/news/detail-432690.html
③ 目錄結(jié)構(gòu)
文章來源地址http://www.zghlxwxcb.cn/news/detail-432690.html
- node_modules：npm 加載的項目依賴模塊。
- public：公共資源目錄。
-
src：這里是我們要開發(fā)的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件：
- assets: 放置一些圖片，如logo等。
- components: 目錄里面放了一個組件文件，可以不用。
- App.vue: 項目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。
- main.js: 項目的核心文件。
- index.css: 樣式文件。
- index.html：首頁入口文件，你可以添加一些 meta 信息或統(tǒng)計代碼。
- package.json：項目配置文件，比如啟動方式。
- README.md：項目的說明文檔，markdown 格式。
- package-lock.json：在npm更改node_modules目錄樹或者package.json時自動生成的，描述了當前項目npm包的依賴樹。
- vite.config.js：使用?vite?創(chuàng)建項目完成后會自動生成 一個?vite.config.js。
到了這里，關(guān)于【前端技術(shù)】Vue3 01：初識 Vue.js的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
