国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Vite + Vue3 實(shí)現(xiàn)前端項(xiàng)目工程化

2年前作者：MagnumHou分類(lèi)：Toy博客閱讀(93)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了Vite + Vue3 實(shí)現(xiàn)前端項(xiàng)目工程化。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

Vue3 發(fā)布至今，周邊的生態(tài)、技術(shù)方案已足夠成熟，個(gè)人認(rèn)為新項(xiàng)目是時(shí)候切換到 Vite + Vue3 了。今天就給大家操作一下這種技術(shù)方案實(shí)現(xiàn)前端工程化。

數(shù)字化管理平臺(tái)
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue權(quán)限系統(tǒng)案例
個(gè)人博客

1. 初始化項(xiàng)目

通過(guò)官方腳手架初始化項(xiàng)目

第一種方式，這是使用vite命令創(chuàng)建，這種方式除了可以創(chuàng)建vue項(xiàng)目，還可以創(chuàng)建其他類(lèi)型的項(xiàng)目，比如react項(xiàng)目
```
npm init vite@latest
```
第二種方式，這種方式是vite專(zhuān)門(mén)為vue做的配置，這種方式創(chuàng)建的項(xiàng)目在創(chuàng)建時(shí)會(huì)提示是否需要安裝各種插件配置
```
npm init vue@latest
```
第三種方式，直接快速通過(guò)參數(shù)生成
```
npm init vite@latest project-engineer --template vue-ts
```

詢(xún)問(wèn)的相關(guān)問(wèn)題：

Project name: … // 項(xiàng)目名稱(chēng)，默認(rèn)值：vue-project，可輸入想要的項(xiàng)目名稱(chēng)，此處不建議中文。
Add TypeScript? … No / Yes // 是否加入TypeScript組件？
Add JSX Support? … No / Yes // 是否加入JSX支持？
Add Vue Router for Single Page Application development? … No / Yes // 是否為單頁(yè)應(yīng)用程序開(kāi)發(fā)添加Vue Router路由管理組件？
Add Pinia for state management? … No / Yes // 是否添加Pinia組件來(lái)進(jìn)行狀態(tài)管理？
Add Vitest for Unit Testing? … No / Yes // 是否添加Vitest來(lái)進(jìn)行單元測(cè)試？
Add an End-to-End Testing Solution? ? No // 是否添加一個(gè)端到端測(cè)試解決方案?
Add ESLint for code quality? … No / Yes // 是否添加ESLint來(lái)進(jìn)行代碼質(zhì)量檢查？
Add Prettier for code formatting? … No / Yes // 是否添加Prettier代碼格式化?

執(zhí)行結(jié)束后進(jìn)入項(xiàng)目目錄，安裝依賴(lài)后執(zhí)行 npm run dev 即可秒開(kāi)項(xiàng)目

命令行演示操作

Vite + Vue3 實(shí)現(xiàn)前端項(xiàng)目工程化
生成的項(xiàng)目目錄如下：

Vite + Vue3 實(shí)現(xiàn)前端項(xiàng)目工程化

但此項(xiàng)目目錄不足以支持項(xiàng)目的復(fù)雜度，因此對(duì)目錄結(jié)構(gòu)進(jìn)行擴(kuò)展如下：

Vite + Vue3 實(shí)現(xiàn)前端項(xiàng)目工程化

Vite + Vue3 實(shí)現(xiàn)前端項(xiàng)目工程化

2. 定制化 plugins

在初始化的項(xiàng)目中 vite.config.js 只是引入了提供 Vue 3 單文件組件支持的 plugin，大家可以根據(jù)項(xiàng)目需要進(jìn)行個(gè)性化配置，詳見(jiàn) awesome-vite。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-438490.html

到了這里，關(guān)于Vite + Vue3 實(shí)現(xiàn)前端項(xiàng)目工程化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

Vue3實(shí)戰(zhàn)(05)-教你快速搭建Vue3工程化項(xiàng)目
除了Vue 3這個(gè)庫(kù)，還需Vue 3 最新全家桶。之前語(yǔ)法演示直接使用script引入Vue 3，從而在瀏覽器里實(shí)現(xiàn)所有調(diào)試功能。但實(shí)際項(xiàng)目中，使用專(zhuān)門(mén)調(diào)試工具。在項(xiàng)目上線之前，代碼也需打包壓縮，并考慮到研發(fā)效率和代碼可維護(hù)性，所以在下面，需建立一個(gè)工程化項(xiàng)目實(shí)現(xiàn)這些功
2024年02月08日
瀏覽(21)
前端工程化 | vue3+ts+jsx+sass+eslint+prettier 配置化全流程
前端開(kāi)發(fā)是一個(gè)工程化的流程。包括持續(xù)集成、持續(xù)部署。我認(rèn)為集成的第一方面就是開(kāi)發(fā)，在前端項(xiàng)目開(kāi)發(fā)中，需要保證代碼格式規(guī)范的統(tǒng)一、代碼質(zhì)量、提交的規(guī)劃。而這些要求需要通過(guò)各種插件來(lái)保證規(guī)范化和流程化開(kāi)發(fā)。如何配置這些插件，這些插件各自的功能是
2024年02月12日
瀏覽(29)
【前端工程化】深入淺出vite（一）--vite的優(yōu)點(diǎn)及原理、性能優(yōu)化
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依賴(lài)更高的 Node 版本才能正常運(yùn)行，當(dāng)你的包管理器發(fā)出警告時(shí)，請(qǐng)注意升級(jí)你的 Node 版本。 webpack 支持多種模塊化，將不同模塊的依賴(lài)關(guān)系構(gòu)建成依賴(lài)圖來(lái)進(jìn)行統(tǒng)一處理，當(dāng)構(gòu)建的項(xiàng)目越來(lái)越大時(shí)，需要處理的 JS 代碼也越
2024年02月11日
瀏覽(20)
前端Vue入門(mén)-day03-用Vue實(shí)現(xiàn)工程化、組件化開(kāi)發(fā)
(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動(dòng)力，如果看完對(duì)你有幫助，請(qǐng)留下您的足跡）目錄生命周期 Vue 生命周期和生命周期的四個(gè)階段? Vue 生命周期函數(shù)（鉤子函數(shù)）案例-create的應(yīng)用案例-mounted的應(yīng)用工程化開(kāi)發(fā) 腳手架 Vue CLI 開(kāi)發(fā) Vue 的兩種方式基本介
2024年02月15日
瀏覽(118)
前端工程化-VUE
高效的開(kāi)發(fā)離不開(kāi)基礎(chǔ)工程的搭建。本章主要介紹如何使用Vue進(jìn)行實(shí)際SPA項(xiàng)目的開(kāi)發(fā)，這里使用的是目前熱門(mén)的JavaScript應(yīng)用程序模塊打包工具Webpack，進(jìn)行模塊化開(kāi)發(fā)、代碼編譯和打包。 Vue腳手架指的是Vue-cli，它是一個(gè)專(zhuān)門(mén)為單頁(yè)面應(yīng)用快速搭建繁雜程序的腳手架，它可以輕
2024年02月08日
瀏覽(98)
pnpm才是前端工程化項(xiàng)目的未來(lái)
相信小伙伴們都接觸過(guò) npm/yarn ，這兩種包管理工具想必是大家工作中用的最多的包管理工具， npm 作為 node 官方的包管理工具，它是隨著node的誕生一起出現(xiàn)在大家的視野中，而 yarn 的出現(xiàn)則是為了解決 npm 帶來(lái)的諸多問(wèn)題，雖然 yarn 提高了依賴(lài)包的安裝速度與使用體驗(yàn)，但它
2024年02月07日
瀏覽(63)
vue項(xiàng)目工程化入門(mén)
mac電腦使用Vue-cli來(lái)完成通過(guò)命令先進(jìn)入到圖形化界面，然后再進(jìn)行vue工程的創(chuàng)建圖形化界面如下：到此，vue項(xiàng)目創(chuàng)建結(jié)束我們通過(guò)VS Code打開(kāi)之前創(chuàng)建的vue文件夾，打開(kāi)之后，呈現(xiàn)如下圖所示頁(yè)面： vue項(xiàng)目的標(biāo)準(zhǔn)目錄結(jié)構(gòu)以及目錄對(duì)應(yīng)的解釋如下圖所示: 其中我們平時(shí)開(kāi)發(fā)
2024年02月08日
瀏覽(22)
Vue2向Vue3過(guò)度核心技術(shù)工程化開(kāi)發(fā)和腳手架
1.1 開(kāi)發(fā)Vue的兩種方式核心包傳統(tǒng)開(kāi)發(fā)模式：基于html / css / js 文件，直接引入核心包，開(kāi)發(fā) Vue。工程化開(kāi)發(fā)模式：基于構(gòu)建工具（例如：webpack）的環(huán)境中開(kāi)發(fā)Vue。工程化開(kāi)發(fā)模式優(yōu)點(diǎn)：提高編碼效率，比如使用JS新語(yǔ)法、Less/Sass、Typescript等通過(guò)webpack都可以編譯成瀏覽器識(shí)
2024年02月11日
瀏覽(66)
探索現(xiàn)代前端工程化工具與流程：提升開(kāi)發(fā)效率和項(xiàng)目質(zhì)量
前端工程化是指利用各種工具和技術(shù)來(lái)提高前端開(kāi)發(fā)效率、代碼質(zhì)量和團(tuán)隊(duì)協(xié)作的一種開(kāi)發(fā)模式。它的背景和發(fā)展與前端技術(shù)的演進(jìn)密切相關(guān)。在過(guò)去，前端開(kāi)發(fā)主要依靠手工編寫(xiě) HTML、CSS和JavaScript 來(lái)構(gòu)建網(wǎng)頁(yè)。隨著互聯(lián)網(wǎng)的發(fā)展和前端技術(shù)的不斷演進(jìn)，前端的工作變得更
2024年02月14日
瀏覽(92)
Ajax，前后端分離開(kāi)發(fā)，前端工程化，Element，Vue路由，打包部署
Ajax介紹 Axios 案例前后端分離前端工程化環(huán)境準(zhǔn)備，nodejs安裝，D:javaprojectjavawebday03-Vue-Elementday03-Vue-Element資料NodeJS安裝文檔 Vue項(xiàng)目簡(jiǎn)介它本來(lái)默認(rèn)端口號(hào)是8080 ，但這就和tomcat沖突了所以修改為7000 Vue項(xiàng)目開(kāi)發(fā)流程 Vue組件庫(kù)Element pagination分頁(yè)組件，table表格組件，Dial
2024年02月05日
瀏覽(103)