最近我參與了一個前端Vue2的項目。盡管之前也有過參與Vue2項目的經(jīng)驗，但對一些前端Web技術(shù)并不十分熟悉。

這次在項目中遇到了很多問題，所以我決定借此機會深入學習Vue相關(guān)的技術(shù)棧。然而，直接開始深入鉆研這些技術(shù)可能會顯得枯燥，容易半途而廢。碰巧最近我想做一個圖床項目，于是決定在學習的過程中結(jié)合實際操作和總結(jié)，提升自己的前端水平。

本次學習的主要目標是提高我的CSS、ES6標準以及Vue相關(guān)技術(shù)棧的能力。在學習一門新技術(shù)時，通常我們會從寫一個簡單的“Hello World”程序開始。

今天，我將介紹Vue及如何使用Vue CLI腳手架來構(gòu)建一個Vue項目。如果在文章中有寫的不對的地方，希望大家給與指正。

Vue.js 是什么?(來源于官網(wǎng))

Vue是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應用。

Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。

github地址：https://github.com/vuejs/vue

中文文檔地址：https://v2.cn.vuejs.org

Vue CLI介紹(來源于官網(wǎng))

Vue CLI 是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)，提供：

• 通過 @vue/cli 實現(xiàn)的交互式的項目腳手架。
• 通過 @vue/cli + @vue/cli-service-global 實現(xiàn)的零配置原型開發(fā)。
• 一個運行時依賴 (@vue/cli-service)，該依賴：

可升級；

• 基于 webpack 構(gòu)建，并帶有合理的默認配置；
• 可以通過項目內(nèi)的配置文件進行配置；
• 可以通過插件進行擴展。

一個豐富的官方插件集合，集成了前端生態(tài)中最好的工具。

• 一套完全圖形化的創(chuàng)建和管理 Vue.js 項目的用戶界面。
• Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標準化。它確保了各種構(gòu)建工具能夠基于智能的默認配置即可平穩(wěn)銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結(jié)配置的問題。與此同時，它也為每個工具提供了調(diào)整配置的靈活性，無需 eject。

中文文檔地址：https://cli.vuejs.org/zh/

使用vue-cli創(chuàng)建項目

安裝node.js

首先確保你已經(jīng)安裝過node.js,若未安裝，則自行安裝，我們此處不做介紹。

我們node使用的版本是v16.20.2,使用以下命令查看node版本：

node -v 

安裝vue-cli

如果你還位安裝vue-cli,使用以下命令安裝：

npm install -g @vue/cli

使用以下命令查看版本

vue -V

如果Vue CLI < 3, 則可以卸載以前舊版本，安裝新版本

npm uninstall -g vue-cli

npm install -g @vue/cli

創(chuàng)建項目

使用vue create 命令創(chuàng)建項目:

vue create ihs-web

我此處選擇的是自定義配置的模式 Manually select features

配置說明：

• Babel: 使用 Babel 來轉(zhuǎn)譯 JavaScript 代碼，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼,以便在不同瀏覽器環(huán)境中運行。
• TypeScript: 使用 TypeScript 編寫代碼。
• Progressive Web App (PWA) Support: 支持漸進式網(wǎng)絡(luò)應用（Progressive Web App）特性。
• Router: 集成 Vue Router，用于實現(xiàn)前端路由功能。
• Vuex: 集成 Vuex，用于狀態(tài)管理。
• CSS Pre-processors: 支持使用 CSS 預處理器。
• Linter / Formatter: 集成代碼規(guī)范檢查工具和代碼格式化工具。
• Unit Testing: 集成單元測試框架。
• E2E Testing: 集成端到端（End-to-End）測試框架。

如果忘記選擇了某個配置，也沒關(guān)系，后續(xù)如果用到了也可以自行安裝。

我此處選擇的是vue2

然后一路回車，直到項目創(chuàng)建完成。

創(chuàng)建完成之后進入到創(chuàng)建的項目的目錄下，使用以下命令啟動項目：

 npm run serve

瀏覽器訪問：http://localhost:8080/ ,可以看到我們的項目已經(jīng)創(chuàng)建啟動成功可以訪問了

到此我們就創(chuàng)建完成一個基于vue-cli的vue2的腳手架項目。

項目結(jié)構(gòu)及說明

├ ── node_module/        # 該目錄包含了項目所需的所有依賴模塊，包括 Vue 和其他第三方庫。
├ ── public/             # 該目錄包含了靜態(tài)資源文件，如 HTML 模板、圖標和其他公共文件。
│   ├── favicon.ico      # 網(wǎng)站的圖標文件。   
│   ├── index.html       # 應用的主 HTML 文件，Vue 組件將會被注入到該文件中。
├ ── src/                # 該目錄是項目的主要源代碼目錄
│   ├── assets/          # 存放應用所需的靜態(tài)資源文件，如圖片、樣式表等。
│   ├── components/      # 存放 Vue 組件文件，用于構(gòu)建應用的各種可復用組件。
│   ├── router/          # 存放 Vue Router 相關(guān)的配置文件，用于管理前端路由。
│   ├── store/           # 存放 Vuex 相關(guān)的配置文件，用于管理應用的狀態(tài)。
│   ├── views/           # 存放頁面級別的 Vue 組件，通常與路由對應。
│   ├── App.vue          # 應用的根組件，包含應用的整體布局和其他子組件。
│   ├── main.js          # 應用的入口文件，初始化 Vue 實例并引入其他模塊和組件。
├──  .browserslistrc     # Browserslist 配置文件，用于指定項目的目標瀏覽器和 Node.js 版本。
├──  .eslintrc.js        # ESLint 配置文件，用于配置代碼規(guī)范檢查工具的規(guī)則和選項。
├──  .gitignore          # Git 版本控制忽略文件列表，指定哪些文件不應被 Git 跟蹤和提交
├──  jsconfig.json       # JavaScript 項目的配置文件，用于指定項目的根路徑和其他選項。
├──  package.json        # 項目的配置文件，包含了項目的元數(shù)據(jù)和依賴信息。
├──  package-lockjson    # 鎖定安裝時的依賴版本，確保不同環(huán)境下的一致性。
├──  README.md           # 項目的說明文檔，包含了項目的介紹、使用方法和其他相關(guān)信息。  
└──vue.configjjs         # Vue CLI 的配置文件，用于自定義構(gòu)建配置和其他選項。

vue-cli < 3 的版本使用腳手架生成項目

如果Vue CLI < 3, 則也可以使用以下命令生成腳手架工程

vue init webpack ihs--web

總結(jié)

通過 Vue CLI 創(chuàng)建 Vue 項目可以極大地提高開發(fā)效率。它不僅提供了一整套標準化的項目結(jié)構(gòu)，還集成了常用的開發(fā)工具和配置，使得開發(fā)者可以專注于業(yè)務邏輯的實現(xiàn)，而不需要花費大量時間在項目配置上。

希望這篇文章能幫助你快速上手 Vue.js，并利用 Vue CLI 開始你的項目開發(fā)之旅。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論