使用Vue CLI腳手架生成Vue項(xiàng)目實(shí)踐
最近我參與了一個(gè)前端Vue2的項(xiàng)目。盡管之前也有過參與Vue2項(xiàng)目的經(jīng)驗(yàn)，但對(duì)一些前端Web技術(shù)并不十分熟悉。
這次在項(xiàng)目中遇到了很多問題，所以我決定借此機(jī)會(huì)深入學(xué)習(xí)Vue相關(guān)的技術(shù)棧。然而，直接開始深入鉆研這些技術(shù)可能會(huì)顯得枯燥，容易半途而廢。碰巧最近我想做一個(gè)圖床項(xiàng)目，于是決定在學(xué)習(xí)的過程中結(jié)合實(shí)際操作和總結(jié)，提升自己的前端水平。
本次學(xué)習(xí)的主要目標(biāo)是提高我的CSS、ES6標(biāo)準(zhǔn)以及Vue相關(guān)技術(shù)棧的能力。在學(xué)習(xí)一門新技術(shù)時(shí)，通常我們會(huì)從寫一個(gè)簡單的“Hello World”程序開始。
今天，我將介紹Vue及如何使用Vue CLI腳手架來構(gòu)建一個(gè)Vue項(xiàng)目。如果在文章中有寫的不對(duì)的地方，希望大家給與指正。
Vue.js 是什么?(來源于官網(wǎng))
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。
Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
github地址：https://github.com/vuejs/vue
中文文檔地址：https://v2.cn.vuejs.org
Vue CLI介紹(來源于官網(wǎng))
Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)，提供：
- 通過 @vue/cli 實(shí)現(xiàn)的交互式的項(xiàng)目腳手架。
- 通過 @vue/cli + @vue/cli-service-global 實(shí)現(xiàn)的零配置原型開發(fā)。
- 一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-service)，該依賴：
可升級(jí)；
- 基于 webpack 構(gòu)建，并帶有合理的默認(rèn)配置；
- 可以通過項(xiàng)目內(nèi)的配置文件進(jìn)行配置；
- 可以通過插件進(jìn)行擴(kuò)展。
一個(gè)豐富的官方插件集合，集成了前端生態(tài)中最好的工具。
- 一套完全圖形化的創(chuàng)建和管理 Vue.js 項(xiàng)目的用戶界面。
- Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接，這樣你可以專注在撰寫應(yīng)用上，而不必花好幾天去糾結(jié)配置的問題。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性，無需 eject。
中文文檔地址：https://cli.vuejs.org/zh/
使用vue-cli創(chuàng)建項(xià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)建項(xiàng)目
使用vue create 命令創(chuàng)建項(xiàng)目:
vue create ihs-web
我此處選擇的是自定義配置的模式 Manually select features
配置說明：
- Babel: 使用 Babel 來轉(zhuǎn)譯 JavaScript 代碼，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼,以便在不同瀏覽器環(huán)境中運(yùn)行。
- TypeScript: 使用 TypeScript 編寫代碼。
- Progressive Web App (PWA) Support: 支持漸進(jìn)式網(wǎng)絡(luò)應(yīng)用（Progressive Web App）特性。
- Router: 集成 Vue Router，用于實(shí)現(xiàn)前端路由功能。
- Vuex: 集成 Vuex，用于狀態(tài)管理。
- CSS Pre-processors: 支持使用 CSS 預(yù)處理器。
- Linter / Formatter: 集成代碼規(guī)范檢查工具和代碼格式化工具。
- Unit Testing: 集成單元測(cè)試框架。
- E2E Testing: 集成端到端（End-to-End）測(cè)試框架。
如果忘記選擇了某個(gè)配置，也沒關(guān)系，后續(xù)如果用到了也可以自行安裝。
我此處選擇的是vue2
然后一路回車，直到項(xiàng)目創(chuàng)建完成。
創(chuàng)建完成之后進(jìn)入到創(chuàng)建的項(xiàng)目的目錄下，使用以下命令啟動(dòng)項(xiàng)目：
npm run serve
瀏覽器訪問：http://localhost:8080/ ,可以看到我們的項(xiàng)目已經(jīng)創(chuàng)建啟動(dòng)成功可以訪問了
到此我們就創(chuàng)建完成一個(gè)基于vue-cli的vue2的腳手架項(xiàng)目。
項(xiàng)目結(jié)構(gòu)及說明
├ ── node_module/ # 該目錄包含了項(xiàng)目所需的所有依賴模塊，包括 Vue 和其他第三方庫。 ├ ── public/ # 該目錄包含了靜態(tài)資源文件，如 HTML 模板、圖標(biāo)和其他公共文件。 │ ├── favicon.ico # 網(wǎng)站的圖標(biāo)文件。 │ ├── index.html # 應(yīng)用的主 HTML 文件，Vue 組件將會(huì)被注入到該文件中。 ├ ── src/ # 該目錄是項(xiàng)目的主要源代碼目錄 │ ├── assets/ # 存放應(yīng)用所需的靜態(tài)資源文件，如圖片、樣式表等。 │ ├── components/ # 存放 Vue 組件文件，用于構(gòu)建應(yīng)用的各種可復(fù)用組件。 │ ├── router/ # 存放 Vue Router 相關(guān)的配置文件，用于管理前端路由。 │ ├── store/ # 存放 Vuex 相關(guān)的配置文件，用于管理應(yīng)用的狀態(tài)。 │ ├── views/ # 存放頁面級(jí)別的 Vue 組件，通常與路由對(duì)應(yīng)。 │ ├── App.vue # 應(yīng)用的根組件，包含應(yīng)用的整體布局和其他子組件。 │ ├── main.js # 應(yīng)用的入口文件，初始化 Vue 實(shí)例并引入其他模塊和組件。 ├── .browserslistrc # Browserslist 配置文件，用于指定項(xiàng)目的目標(biāo)瀏覽器和 Node.js 版本。 ├── .eslintrc.js # ESLint 配置文件，用于配置代碼規(guī)范檢查工具的規(guī)則和選項(xiàng)。 ├── .gitignore # Git 版本控制忽略文件列表，指定哪些文件不應(yīng)被 Git 跟蹤和提交 ├── jsconfig.json # JavaScript 項(xiàng)目的配置文件，用于指定項(xiàng)目的根路徑和其他選項(xiàng)。 ├── package.json # 項(xiàng)目的配置文件，包含了項(xiàng)目的元數(shù)據(jù)和依賴信息。 ├── package-lockjson # 鎖定安裝時(shí)的依賴版本，確保不同環(huán)境下的一致性。 ├── README.md # 項(xiàng)目的說明文檔，包含了項(xiàng)目的介紹、使用方法和其他相關(guān)信息。 └──vue.configjjs # Vue CLI 的配置文件，用于自定義構(gòu)建配置和其他選項(xiàng)。
vue-cli < 3 的版本使用腳手架生成項(xiàng)目
如果Vue CLI < 3, 則也可以使用以下命令生成腳手架工程
vue init webpack ihs--web
總結(jié)
通過 Vue CLI 創(chuàng)建 Vue 項(xiàng)目可以極大地提高開發(fā)效率。它不僅提供了一整套標(biāo)準(zhǔn)化的項(xiàng)目結(jié)構(gòu)，還集成了常用的開發(fā)工具和配置，使得開發(fā)者可以專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)，而不需要花費(fèi)大量時(shí)間在項(xiàng)目配置上。
希望這篇文章能幫助你快速上手 Vue.js，并利用 Vue CLI 開始你的項(xiàng)目開發(fā)之旅。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號(hào)最后不加
這篇文章主要為大家介紹了vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號(hào)最后不加逗號(hào)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了如何修改el-form-item 的label的字體顏色問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.use()主要用于注冊(cè)全局插件,當(dāng)插件具有install方法時(shí),調(diào)用Vue.use()可以全局使用該插件,Vue.prototype用于注冊(cè)全局變量,這些變量在項(xiàng)目任何位置都可以通過this.$變量名訪問,兩者的主要區(qū)別在于Vue.use()用于插件,Vue.prototype用于變量2024-10-10
Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項(xiàng)目中使用 webpack 打包后升級(jí)，用戶反饋使用瀏覽器（chrome 45）訪問白屏。經(jīng)過排查發(fā)現(xiàn)：由于 chrome 45 無法兼容 ES6 語法導(dǎo)致的，接下來給大家介紹下Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器方法,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了淺談 Vue 項(xiàng)目優(yōu)化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue框架下引入ActiveX控件的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue動(dòng)畫事件詳解及過渡動(dòng)畫實(shí)例
通過 Vue.js 的過渡系統(tǒng)，可以在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過渡效果。Vue.js 會(huì)在適當(dāng)?shù)臅r(shí)機(jī)為你觸發(fā) CSS 過渡或動(dòng)畫，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過渡過程中執(zhí)行自定義的 DOM 操作2019-02-02
這篇文章主要介紹了vue中data和data()的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vuex的幾個(gè)屬性及其使用傳參,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)注冊(cè)與登錄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09