建站
咨詢
售后
建站咨詢
新聞中心
一、前言
vue3的快速更新，很多IT發(fā)展快的地區(qū)在22開始都已經(jīng)提上日程，小編所在的青島好像最近才有點(diǎn)風(fēng)波。vue3的人才在青島還是比較稀缺的哈，純屬小編自己的看法，可能小編是個(gè)井底之蛙??！
10多年的興隆網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整興隆建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“興隆網(wǎng)站設(shè)計(jì)”,“興隆網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
vue2+webpack的時(shí)代要過去了，主要是啟動(dòng)時(shí)間太慢了。所以還是比較推薦使用Vite進(jìn)行構(gòu)建，vue3官方也是推薦的?。∷俣瓤?，基本上是秒啟動(dòng)級別的！帶的例子還是vue3最新的組合式語法糖setup。
二、vite介紹和搭建
1、介紹
Vite官網(wǎng)：https://cn.vitejs.dev/
Vite 是一個(gè)輕量級的、速度極快的構(gòu)建工具，對 Vue SFC 提供第一優(yōu)先級支持。作者是尤雨溪，同時(shí)也是 Vue 的作者！
Vite3 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依賴更高的 Node 版本才能正常運(yùn)行，當(dāng)你的包管理器發(fā)出警告時(shí)，請注意升級你的 Node 版本。
2、搭建
廢話不多說咱們直接構(gòu)建：
要使用 Vite 來創(chuàng)建一個(gè) Vue 項(xiàng)目，非常簡單：
npm init vue@latest
這個(gè)命令會安裝和執(zhí)行 create-vue，它是 Vue 提供的官方腳手架工具。
隨后輸入項(xiàng)目名稱即可。
隨后進(jìn)行一頓操作進(jìn)行構(gòu)建腳手架：
3、參數(shù)解釋
為了大家可以更清楚看到，在下面在寫一遍：
|
問題 |
翻譯 |
選擇 |
|
√ Project name: |
項(xiàng)目名稱 |
vite-vue3 |
|
√ Add TypeScript? |
使用ts新語法 |
Yes |
|
√ Add JSX Support? |
可以使用{{}}嵌入 |
Yes |
|
√ Add Vue Router for Single Page Application development? |
添加路由 |
Yes |
|
√ Add Pinia for state management? |
存儲庫 |
Yes |
|
√ Add Vitest for Unit Testing? |
單元測試 |
No |
|
√ Add Cypress for both Unit and End-to-End testing? |
單元測試 |
No |
|
√ Add ESLint for code quality? |
es語法檢測 |
Yes |
|
√ Add Prettier for code formatting? |
語法樣式 |
Yes |
4、在idea中使用
安裝依賴
npm install
安裝es語法檢查
npm run lint
運(yùn)行項(xiàng)目
npm run dev
啟動(dòng)還是很快的！
頁面正常，搞定手工！
5、vue3語法糖
這可以是一個(gè)vue3文件的模板。
三、Pinia 介紹
Pinia 是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態(tài)。如果您熟悉 Composition API，您可能會認(rèn)為您已經(jīng)可以通過一個(gè)簡單的 export const state = reactive({})。這對于單頁應(yīng)用程序來說是正確的，但如果它是服務(wù)器端呈現(xiàn)的，會使您的應(yīng)用程序暴露于安全漏洞。但即使在小型單頁應(yīng)用程序中，您也可以從使用 Pinia 中獲得很多好處：
dev-tools 支持
- 跟蹤動(dòng)作、突變的時(shí)間線。
- Store 出現(xiàn)在使用它們的組件中。
- time travel 和 更容易的調(diào)試。
熱模塊更換
- 在不重新加載頁面的情況下修改您的 Store。
- 在開發(fā)時(shí)保持任何現(xiàn)有狀態(tài)。
插件：使用插件擴(kuò)展 Pinia 功能。
為 JS 用戶提供適當(dāng)?shù)?TypeScript 支持或 autocompletion。
服務(wù)器端渲染支持
Pinia?：是新版的vuex?，簡化了vuex?，效率更快，上手更快，推薦推薦大家在vue3?使用，當(dāng)然他也支持vue2。
pinia的圖標(biāo)還是比較可愛的！！
pinia官網(wǎng)：https://pinia.web3doc.top/
四、總結(jié)
這樣就搭建成功了，其實(shí)很簡單，主要是借此聊聊Vue3+ts+pinia，新東西還是要多接觸，雖然咱是后端，技多不壓身嘛?。?/p>
本文題目：使用Vite快速構(gòu)建Vue3+ts+pinia腳手架
本文網(wǎng)址：http://www.fisionsoft.com.cn/article/cogjiih.html
