iT邦幫忙

vite相關文章
共有 78 則文章
鐵人賽 Modern Web DAY 5

達標好文 技術 Day_05 : 讓 Vite 來開啟你的Vue 之 前進Vite

Hi Dai Gei Ho~ 我是Winnie,終於今天來到了第五天,明天也要放假了! 在接下來幾篇文章也將開始進入 Vite 的主題,其中此篇文章主要會針對...

鐵人賽 Modern Web DAY 4

技術 真的好想離開 Vue 3 新手村 - Day 4: 從 npm run build (vite build) 簡單認識打包

誰適合看這篇 不知道 npm run dev、npm run build、npm run preview 的用處 不知道「打包」做了哪些事?為什麼前端需要打包...

鐵人賽 Modern Web DAY 2

技術 真的好想離開 Vue 3 新手村 - Day 2: 建立 Vue 專案開發環境 feat. Vite

剛開始學 Vue,最困擾的就是該怎麼建立開發的環境。 誰適合看這篇: 不知道怎麼建立 Vue 專案 按照官網用 npm init vue@latest 建立了...

鐵人賽 Modern Web DAY 3

技術 真的好想離開 Vue 3 新手村 - Day 3: 細看 Vue + Vite 專案資料夾結構

誰適合看這篇 已經初步了解 npm、package.json、package-lock.json、node_modules 建立 Vue 專案後,沒有仔細看...

鐵人賽 Modern Web DAY 6

技術 Day_06 : 讓 Vite 來開啟你的Vue 之 Production Build

Hi Dai Gei Ho~ 我是Winnie~ 今天是中秋連假的第一天,(而聽主管說 通常連假什麼的最容易在鐵人賽中殞落XD), 所以為了證明我還沒殞落,希...

鐵人賽 Modern Web DAY 7

技術 Day_07 : 讓 Vite 來開啟你的Vue 之 Vite 核心 esbuild

Hi Dai Gei Ho~ 我是Winnie~ 今天終於來到我的第七天,按照七天養成一個好習慣的說法,我發現自己好像也開始養成了每天會寫一點東西的習慣,不管...

鐵人賽 Modern Web DAY 15

技術 Day 15: 在 Vue 專案使用 Sass/SCSS +共用變數 (feat. Vite)

Outline 主要分成四個部份 安裝 Sass 預處理器,在 SFC 檔使用 SCSS 撰寫 style 區域引入 SCSS 樣式或變數 全域引入 SCSS...

鐵人賽 Modern Web DAY 8

技術 Day_08 : 讓 Vite 來開啟你的Vue 之 Vite 核心 HMR

Hi Dai Gei Ho~ 我是Winnie~ 今天是第八天,中秋連假到數結束第二天~ 在開始說明今天主題之前,請大家回憶一下,當我們在local開發時,先不...

鐵人賽 Modern Web DAY 1

技術 Day_01: 讓 Vite 來開啟你的Vue 前言

Hi Da Gei Ho~ 初次見面,我是Winnie~ 我是一位剛轉職六個月的菜鳥前端(前身是網頁設計師),如果對於我的轉職的過程有一絲好奇的朋友的可以看看...

鐵人賽 Modern Web DAY 6

技術 真的好想離開 Vue 3 新手村 - Day 6: 什麼是 Vue SFC 檔?如何被編譯?feat. Vite

Outline 什麼是 SFC 檔 認識 SFC 檔的組成 - Language Block SFC 檔會如何被解析(其實不算重要,但因為我很好奇) 什麼是...

鐵人賽 Modern Web DAY 4

技術 Day_04 : 讓 Vite 來開啟你的Vue_ Module Bundler

Hi~Dai Gei Ho,我是Winnie,今天是2021/09/16 ,是個對我來說別具意義的一天,希望大家都要健康快樂。( 夜深了,突然想來碎唸下XD。...

鐵人賽 Modern Web DAY 23

技術 [Day23]:Vite 環境最麻煩了 part 2

Vite 環境最麻煩了 開始用Vite之後,是個會自立自強的大人了呢!!────────────────────── By Opshell 目標: 開...

技術 Create-React-App 到 Vite: 將開發速度提升到新的檔次

今天這篇文章會示範如何將 create-react-app 轉成 vite,大幅提升開發速度 什麼是 Vite? Next Generation Fronte...

技術 [ Vue ] 使用 Vitawind 1.2 來 建置 Vite + Tailwind JIT 專案

建立 Vite 專案 在你要放置專案的地方執行這個指令來建立 vue 模板的 vite 專案 # npm 6 npm init vite [專案名稱] --te...

鐵人賽 Modern Web DAY 22

技術 [Day22]:Vite 環境最...咦裝好了 part1

Vite 環境最...咦裝好了 每次開始學習新的語言或框架,最麻煩的不是要學習他有哪些語法、規則是安裝...嗯? 好了?!!───────────────...

鐵人賽 影片教學 DAY 2
我讀你看 系列 第 2

技術 [vite] Vite 是什麼?正確的發音怎麼唸!?

20:00 首播,建議播放速度 x1.2 Vite 怎麼唸? 不是 Vue 可以用 Vite 嗎?(Getting Started) Vite 為什麼它...

鐵人賽 自我挑戰組 DAY 25
30天深入淺出Redux 系列 第 25

技術 Redux 深入淺出 - [ Day 25 ] Redux Toolkit Query 簡介

什麼是 Redux Toolkit Query? Redux Toolkit Query 官方簡稱 RTK Query RTK Query 是一種進階數據獲取和...

鐵人賽 Modern Web DAY 1

技術 你知道這是什麼嗎? Chrome Extension MV3 with Vite - 前言&大綱

Hi Dai Gei Ho~ 我是Winnie ~ 目前是一位前端工程師,目標是可以 持續在做自己喜歡的事。如果對於我還有一絲好奇的捧油可以看看 這篇文章 在...

技術 Create-React-App 到 Vite: ESLint 環境架設

會有今天的文章是因為上次由 CRA 轉到 Vite 後(如果還沒有看文章的話,可以點這裡,發現原本的ESLint設定全部都不能用了,需要全部重新設定 這邊作為...

鐵人賽 Vue.js DAY 18

技術 DAY 18 - Vue + Vite + Nuxt 建立專案,享受最優質的 DX

DAY 18 - Vue + Vite + Nuxt 建立專案,享受最優質的 DX Vue3 + Vite + Nuxt 這次我主要是選擇使用Vue3 +...

鐵人賽 Modern Web DAY 2

技術 你知道這是什麼嗎? Chrome extension MV3 With Vite - Day2 運行環境&組成

Hi Dai Gei Ho~ 我是Winnie ~ 在上篇文章中,我們已初步的了解 Extension 是什麼後,接著再今天內容我們要再深入一步探討關於 Ex...

鐵人賽 Modern Web

技術 [Day31]:後記 - 環境調整 Part1 - ESLint

Vite環境最...咦!壞掉了... 環境什麼的果然還是最麻煩了! 哭阿!──────────────── By Opshell 目標:成功完成一個能用...

技術 [ React ] 使用 Vitawind 1.2 來 建置 Vite + Tailwind JIT 專案

建立 Vite 專案 在你要放置專案的地方執行這個指令來建立 react 模板的 vite 專案 # npm 6 npm init vite [專案名稱] --...

鐵人賽 影片教學 DAY 4
我讀你看 系列 第 4

技術 [npm] npm create 是什麼?自己寫的 CLI 也可用這個指令嗎?

建議使用 1.2x 以上的播放速度觀看 npm create vite 做了什麼? 如果你想建立一個 CLI 工具,要怎麼做才可以透過 npm crea...

鐵人賽 影片教學 DAY 1
Vite 原始碼解讀 系列 第 1

技術 [Vite 原始碼解讀] 簡介

30 天影集播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDIC...

鐵人賽 Modern Web DAY 1
30天30個前端任務 系列 第 1

技術 #0. 前言+環境配置

前言 Hi!我是SingYo,謝謝你點進來看這個系列!這是我第一次參加鐵人賽。 其實說30個前端「任務」有點籠統,較精確的說法會像是UI元件(UI compon...

鐵人賽 自我挑戰組 DAY 29
30天深入淺出Redux 系列 第 29

技術 Redux 深入淺出 - [ Day 29 ] React RTK Query Typescript todo list (更新 & 刪除)

前一篇我們完成了基本的 getAll request,並於畫面簡單呈現表單內容,那麼今天我們就接續完成他應該有的修改與刪除能吧! 讓我們先回到 todoApi...

鐵人賽 自我挑戰組 DAY 18
30天深入淺出Redux 系列 第 18

技術 Redux 深入淺出 - [ Day 18 ] React Redux 簡介

在整進 React 專案之前我們必須了解一件事,Redux 是可以單獨獨立運作的,這也是我們之前所做的兩個 project 驗證的結果,大家應該都不陌生,兩個...

鐵人賽 自我挑戰組 DAY 26
30天深入淺出Redux 系列 第 26

技術 Redux 深入淺出 - [ Day 26 ] React RTK Typescript 基本應用

接續前一篇的進度,我們已經設置好 store 了,接著我們來試做一個簡單的 counter 講解一下在 Typescript 的環境下如何處理我們的 slice...

鐵人賽 DevOps DAY 19

技術 [虛實整合]前端3D介面讀取的檔案格式與顯示

前端介面的呈現我們使用Vue+three.js。 Vue我們不選用vue-cli來建置專案,而是使用Vite,以求更好的性能。 然後再利用Vue 3D plug...