前端大佬尤雨溪在知乎上回答這樣一個問題, 隨著vite2.0的發(fā)布,直接引爆前端圈。
那么vite到底好在哪里,如何使用呢?
接下來由大師兄帶你一起走進vite世界风皿。
一. Vite簡介
Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗龟虎。
在日常開發(fā)中,一般使用Webpack對項目進行構(gòu)建編譯,最后打包成Bundle文件璃谨。
當(dāng)冷啟動開發(fā)服務(wù)器時,基于打包器的方式啟動必須有限抓取并構(gòu)建整個應(yīng)用之后才能提供服務(wù),隨著項目的規(guī)模越大,Webpack啟動服務(wù)器變得緩慢。
而Vite 通過在一開始將應(yīng)用中的模塊區(qū)分為依賴和源碼兩類鲤妥，改進了開發(fā)服務(wù)器啟動時間佳吞。
Vite以原生ESM方式提供源碼。這實際上是讓瀏覽器接管了打包程序的部分工作:Vite 只需要在瀏覽器請求源碼時進行轉(zhuǎn)換并按需提供源碼棉安。根據(jù)情景動態(tài)導(dǎo)入代碼,即只在當(dāng)前屏幕上實際使用時才會被處理底扳。
瀏覽器支持
開發(fā)環(huán)境中:Vite需要在支持原生 ES 模塊動態(tài)導(dǎo)入的瀏覽器中使用。
生產(chǎn)環(huán)境中:默認支持的瀏覽器需要支持 通過腳本標(biāo)簽來引入原生 ES 模塊 垂券』ㄑ危可以通過官方插件 @vitejs/plugin-legacy 支持舊瀏覽器。
二. 項目搭建
1.環(huán)境準(zhǔn)備
Vite需要Node.js版本 >=12.0.0
查看Node版本,如低于12.0.0 請升級
? node -v
? v16.1.0
2.創(chuàng)建項目
# 使用npm
? npm init @vitejs/a
# 安裝依賴
? npm install
# 啟動項目
? npm run dev
瀏覽器輸入地址后我們可以看到服務(wù)已啟動
3.Vite配置文件修改
圖中對比通過vue-cli創(chuàng)建的項目,我們可以發(fā)現(xiàn)index.html在項目最外層而不是在public文件夾內(nèi)菇爪。這是有意而為之的:在開發(fā)期間Vite 是一個服務(wù)器算芯，而index.html是該 Vite 項目的入口文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
Vite將index.html視為源碼和模塊圖的一部分凳宙。Vite解析<script type="module" src="...">,這個標(biāo)簽指向你的JavaScript源碼熙揍。
// 更多相關(guān)vite配置參考官網(wǎng)文檔:https://cn.vitejs.dev/config/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
//項目根目錄（index.html 文件所在的位置）
root : './src',
//開發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑
base : './',
//開發(fā)模式 默認：'development'（開發(fā)模式），'production'（生產(chǎn)模式）
mode : 'development',
server : {
}
})
4.集成路由 Vue Router
Vue Router是 Vue.js官方的路由管理器氏涩。它和Vue.js的核心深度集成届囚，讓構(gòu)建單頁面應(yīng)用變得易如反掌。
# 安裝Vue Router4
? npm install vue-router@4
新建文件:src/arouter/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
在main.ts下引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
5.集成狀態(tài)管理 Vuex
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式是尖。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化意系。
# 安裝vuex
npm install vuex@next --save
新建文件src/strore/index.ts
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
在main.ts下引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(router).use(store).mount('#app')
6.集成網(wǎng)絡(luò)請求工具 Axios
# 注:具體使用方式參考官網(wǎng)文檔
# 安裝Axios
npm install axios
7.集成代碼規(guī)范工具 Eslint
ESLint是一個開源的JavaScript代碼檢查工具,由 Nicholas C. Zakas 于2013年6月創(chuàng)建。代碼檢查是一種靜態(tài)的分析,常用于尋找有問題的模式或者代碼,并且不依賴于具體的編碼風(fēng)格饺汹。
# 安裝 ESLint：
npm install eslint --save-dev
# 創(chuàng)建配置文件
# 這里推薦使用終端提示w完成配置操作
npx eslint --init
上圖大概意思為:
- How would you like to use ESLint? （你想如何使用 ESLint?）
選擇To check syntax, find problems, and enforce code style（檢查語法蛔添、發(fā)現(xiàn)問題并強制執(zhí)行代碼風(fēng)格）- What type of modules does your project use?（你的項目使用哪種類型的模塊?）
選擇 JavaScript modules (import/export)- Which framework does your project use? （你的項目使用哪種框架?）
選擇 Vue.js- Does your project use TypeScript?（你的項目是否使用 TypeScript？）
yes
- Where does your code run?（你的代碼在哪里運行?）
選擇 Browser 和 Node- How would you like to define a style for your project?（你想怎樣為你的項目定義風(fēng)格？）
選擇 Use a popular style guide（使用一種流行的風(fēng)格指南）- Which style guide do you want to follow?（你想遵循哪一種風(fēng)格指南?）
我們這里選擇 Airbnb.ESLint 為我們列出了三種社區(qū)流行的 JavaScript 風(fēng)格指南迎瞧，
分別是 Airbnb夸溶、Standard、Google(這里根據(jù)個人喜好選擇吧...)- What format do you want your config file to be in? (你的配置文件是使用什么格式的?)
選擇JavaScript- Would you like to install them now with npm?（你想現(xiàn)在就用 NPM 安裝它們嗎?）
yes
完成上述操作后,會在根目錄下生成.eslintrc.js文件!
根據(jù)項目需求,我們也可以追加自定義ESLint規(guī)則
module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'plugin:vue/essential',
'airbnb-base',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaVersion: 2018,
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
plugins: [
'vue',
'@typescript-eslint',
],
rules: {
},
};
至此,一個簡單的項目已經(jīng)搭建完成,趕緊關(guān)注回復(fù)「Vite」獲取相關(guān)示例源碼哦~~
上述的工具也不是必須的,但是接入成熟的工具可以更有效的提高我們的開發(fā)效率和代碼質(zhì)量,共勉凶硅。
原創(chuàng)不易,如文章對你有幫助,你的點贊缝裁、留言、分享就是大師兄寫下去的動力!
