建站
咨詢
售后
建站咨詢
新聞中心
Bug源測試，上線來幾個。愿君多修改，今夜眼難合。
創(chuàng)新互聯(lián)是一家專業(yè)提供劍河企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站建設、網(wǎng)站建設、html5、小程序制作等業(yè)務。10年已為劍河眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。
這是小編關于Vue3.0系列文章的第二篇，本文將帶您從零搭建一個基于Vue3.0與vite的Vue3.0開發(fā)環(huán)境，通過本文的學習，你將學習到以下內(nèi)容：
- 使用vite初始化Vue3.0項目
- 配置ts
- 配置vue-router
- 配置vuex
- 使用Vue3.0開發(fā)一個TodoList示例
同時本文的內(nèi)容已錄制為視頻發(fā)布到了B站，可以點擊鏈接跳轉到視頻地址，同時您也可以通過微信搜索【前端有的玩】關注我的公眾號加我微信好友，手摸手和你一起學習Vue3.0
使用vite初始化項目
vite 介紹
vite是尤大大在今年新鼓搗出來的一個工具，尤大大對vite的描述是這樣的: Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. 翻譯成中文就是：Vite 是一個由原生 ES Module 驅動的 Web 開發(fā)構建工具。在開發(fā)環(huán)境下基于瀏覽器原生 ES imports 開發(fā)，在生產(chǎn)環(huán)境下基于 Rollup 打包。
上面這段話提到了一個關鍵字ES Module,這個是什么呢？詳細的介紹大家可以訪問 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules 進行查看。此處我們長話短說。在最早的時候，還沒有前端工程化，然后我們寫javascript都是寫到一個文件，然后通過script標簽去引用，后來隨著前端發(fā)展越來越壯大，js之間依賴越來越復雜，這時候就需要有一種可以將JavaScript 程序拆分為可按需導入的單獨模塊的機制來維護這個依賴，隨之就誕生了AMD,CMD等等，而ES Module就是瀏覽器支持的原生模塊依賴的功能。
為什么要用vite
為什么尤大大要推出vite，在我們使用webpack的時候，每次開發(fā)時候啟動項目都需要幾十秒甚至超過一分鐘，比較慢，而且熱更新也比較慢，而vite的主要特點就是快，官網(wǎng)對于vite的特點是這樣描述的
- 快速的冷啟動
- 即時的模塊熱更新
- 真正的按需編譯
到底有多快呢，我們先新建一個項目試試
初始化vite項目
- 初始化項目, 在工作空間打開終端窗口，對于window用戶即cmd，然后執(zhí)行下面命令
- yarn create vite-app my-vue3
執(zhí)行之后就會輸出以下內(nèi)容，可以看到新建項目特別快，僅僅用了1.63s
2. 初始化完項目，通過cd my-vue3進行到項目里面，然后再執(zhí)行yarn安裝依賴（此處建議使用淘寶鏡像，比較快）
3. 依賴安裝完需要通過yarn dev啟動項目
是不是瞬間體驗到了秒啟項目的感覺，啟動之后就可以通過http://localhost:3000來訪問項目了
查看項目結構
使用vscode打開項目之后，可以查看到新建的項目結構與vue-cli4創(chuàng)建的項目結構基本一樣，都是我們很熟悉的App.vue和main.js
查看main.js文件內(nèi)容
打開main.js
- import { createApp } from 'vue'
- import App from './App.vue'
- import './index.css'
- createApp(App).mount('#app')
發(fā)現(xiàn)創(chuàng)建Vue的方式變了，原來是通過new Vue的方法來初始化Vue，在Vue3.0中，修改為了通過createApp的方式，關于Vue3.0的更多使用方式，我們將在后面的系列文章中逐漸為您帶來講解。
配置typescript
typescript現(xiàn)在已經(jīng)成為了前端必備技能之一，大量的項目也開始基于typescript進行開發(fā)。在使用Vue2.0的時候，因為Vue2.0沒有對typescript進行支持，所以使用ts開發(fā)功能顯示有些別扭。但到了Vue3，其自身源碼便是基于ts開發(fā)的，所以對ts天生有著很好的支持。使用vite配置typescript很簡單，只需要進行以下幾步操作.
- 安裝 typescript
- yarn add typescript -D
2. 初始化tsconfig.json
- # 然后在控制臺執(zhí)行下面命令
npx tsc --init
3. 將main.js修改為main.ts,同時將index.html里面的引用也修改為main.ts, 通過還需要修改App.vue與HelloWorld.vue文件，修改方式如下
公司名稱：四川綿陽平武網(wǎng)站建設工作室 聯(lián)系電話：18980820575
網(wǎng)站備案號：蜀ICP備2024061352號-3
四川平武建站 四川平武網(wǎng)站建設 四川平武網(wǎng)站設計 四川平武網(wǎng)站制作 成都做網(wǎng)站
