VITE 2から始める
22931 ワード
ベーテ⚡️ フロントエンドツーリングのエミームです.
なぜ?なぜなら、狂った高速であり、よく提供しています.
月半ばに、VITEの最新の反復のリリースを発表しました
このチュートリアルでは、どのように時間がないのVITEとVUE 3アプリを設定する方法を学ぶつもりです、いくつかのクールなプラグインは、DX(開発者の経験)を改善するために、より重要なことは、それがどのように動作しているのか理解し、なぜ高速です.
あなたの最初のViteプロジェクトをスキャフォールドする
また、名前とテンプレートの追加コマンドラインオプションを使用して1つのコマンドを足場にすることができます.このチュートリアルでは、Vueプロジェクトを構築します.
VITEプロジェクトの構造
依存関係:本質的にプレーンなJavaScriptで、開発中に変更されません
ソースコード:うん、あなたのコード、すべてのVueコンポーネント、およびCSSは、しばしば編集します.
あなたは覚えてる
どうやって動くの？
アプリ.コードのバンドルを含むJS
チャンクベンダー.サードパーティからのすべてのコードを含むJS. 全体の負荷時間301 msで2
バンドルベースのdevサーバーは、すべてのモジュールと異なるファイルをパッケージ化する仕事をします.このイメージ
ボックス内のより複雑な、より多くの時間が起動するサーバーが必要になります.
さて、それをViteのものと比較しましょう.
ご覧の通り、VITEはあらゆるファイルをロードします
転送されたサイズに注意してください、そして、それはベースの2.4 MBに比べて1 MBに達しませんでした.
この速度はネイティブESMがバンドルの仕事の責任の一部をブラウザ自身に転送するからです.ブラウザがHTTP経由でそれを要求する間、基本的にはオンデマンドでコードを変換して、提供します.
この比較は、もちろん、1つの(1)のコンポーネントと小さなアプリケーションで行われて、私はあなたが大きい/複雑なものと同じようにしようとすると、結果によって驚かれることをお勧めします.
遅い更新の闘争
によって供給される90 + iconsetIconify
Browser the icons インストール
何がNuxtでVITEを使用するか?それはカバーです.
Nuxt Viteをインストールします
手動でコンポーネントをインポートするのはうんざり?もう言いません.
より多くのプラグインをチェックしたいならば、彼らはここでリストされます
関連する恐ろしいもののキュレーテッドリストVite.js
リストを探索する左上隅にある“目次”メニューを使用してください.
Documentation GitHub Repo Release Notes Vue 3 Docs Awesome Vue Migration from v1
create-vite - scaffoldingあなたの最初のViteプロジェクト.
create-vite-pwa - と同じscaffoldingオプション
vit-singlefile-gzip - 埋め込み用のVITEスターターテンプレート.
11st-Starter-Kit - 11 ty、風上のCSSとアルパインでVITEによって供給されます.js
Vitesse - 自発的なスターターテンプレート.
vite-vue3-tailwind-starter - Vue 3、VueルータとTarwind CSS.
vite-ts-tailwind-starter - Cookie、サイプレス.IO e 2 eテスト+ ci
vite-electron-quick - Vue 3、Typescript、電子11のスターターテンプレート.
vite-electron-builder - 電子アプリは、両方のバックとフロントエンドの自動リリースを使用してVITEを使用します.
vue-vben-admin - VeE 3、AntデザインVue、TypesScriptに基づくバックグラウンド管理テンプレート.
electron-vue-next - vue View on GitHub
あなたのフロントエンドのツールでステップアップする準備ができていますか?
なぜ?なぜなら、狂った高速であり、よく提供しています.
月半ばに、VITEの最新の反復のリリースを発表しました
Vite 2.0発表
エバン・ユー・ 2月16日・ 4分読む
#javascript
#webdev
#vite
Vite (French word for "fast", pronounced
/vit/) is a new kind of build tool for front-end web development. Think a pre-configured dev server + bundler combo, but leaner and faster. It leverages browser's native ES modules support and tools written in compile-to-native languages likeesbuildto deliver a snappy and modern development experience.
このチュートリアルでは、どのように時間がないのVITEとVUE 3アプリを設定する方法を学ぶつもりです、いくつかのクールなプラグインは、DX(開発者の経験)を改善するために、より重要なことは、それがどのように動作しているのか理解し、なぜ高速です.
あなたの最初のViteプロジェクトをスキャフォールドする
お好みの端末を開き実行します.
npm init @vitejs/app
または、あなたが糸を好むならば
yarn create @vitejs/app
プロンプトに従ってください.
VITEは複数のテンプレートプリセットをサポートします.
npm init @vitejs/app
yarn create @vitejs/app
vanilla vue vue-ts react react-ts preact preact-ts lit-element lit-element-ts yarn create @vitejs/app awesomely-fast --template vue
VITEプロジェクトの構造
あなたがおそらく気づいた最初のことはindex.html はもはやpublic rootディレクトリにあるフォルダ.
それはviteが扱うのでindex.html ソースコードとモジュールグラフの一部として.静的なHTTPサーバと同様に、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.js"></script>
</body>
</html>
構造の残りの部分は、内部のかなり標準ですsrc フォルダをApp.vue ルートコンポーネントとしてmain.js あなたのVueアプリをブートストラップする.
devサーバ
あなたpackage.json 3つの組み込みスクリプトが付属します.
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
先に行きなさいyarn dev .
正確に、約344 ms前後にDevサーバーを起動します.VueのCLIを使用して、どのくらいの速さのアイデアを与えるには、devのサーバーが2番目と半分を取るだろう.
コールドサーバーを起動すると、バンドルベース(WebPack)のセットアップは熱心にクロールし、それを提供する前に、アプリケーション全体を構築する必要があります.
VITEは、アプリケーションのモジュールを2つのカテゴリーに分割することによって、devサーバの起動時間を改善します
<!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.js"></script>
</body>
</html>
あなた
package.json 3つの組み込みスクリプトが付属します. "scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
yarn dev . 正確に、約344 ms前後にDevサーバーを起動します.VueのCLIを使用して、どのくらいの速さのアイデアを与えるには、devのサーバーが2番目と半分を取るだろう.
コールドサーバーを起動すると、バンドルベース(WebPack)のセットアップは熱心にクロールし、それを提供する前に、アプリケーション全体を構築する必要があります.
VITEは、アプリケーションのモジュールを2つのカテゴリーに分割することによって、devサーバの起動時間を改善します
依存関係:本質的にプレーンなJavaScriptで、開発中に変更されません
ソースコード:うん、あなたのコード、すべてのVueコンポーネント、およびCSSは、しばしば編集します.
Vite serves source code over native ESM. This is essentially letting the browser taking over part of the job of a bundler
あなたは覚えてる
<script type="module" /> 初めにタグ?それはnative ESM アプローチ.どうやって動くの？
見てみましょうNetwork Tab VITEアプリ対vue-cli ( webpack )
ヴュー
上記のイメージで.vue-cli コードを2つのメインチャンクにバンドルします.
アプリ.コードのバンドルを含むJS
チャンクベンダー.サードパーティからのすべてのコードを含むJS.
バンドルベースのdevサーバーは、すべてのモジュールと異なるファイルをパッケージ化する仕事をします.このイメージ
ボックス内のより複雑な、より多くの時間が起動するサーバーが必要になります.
さて、それをViteのものと比較しましょう.
VITE devサーバ
ご覧の通り、VITEはあらゆるファイルをロードします
.vue , .js ) モジュールとして、並列に行うことができ、全体のロード時間を~190ms . 転送されたサイズに注意してください、そして、それはベースの2.4 MBに比べて1 MBに達しませんでした.
この速度はネイティブESMがバンドルの仕事の責任の一部をブラウザ自身に転送するからです.ブラウザがHTTP経由でそれを要求する間、基本的にはオンデマンドでコードを変換して、提供します.
この比較は、もちろん、1つの(1)のコンポーネントと小さなアプリケーションで行われて、私はあなたが大きい/複雑なものと同じようにしようとすると、結果によって驚かれることをお勧めします.
遅い更新の闘争
VITEの前に、あなたのアプリケーションが進化して、何百ものコンポーネントを保持し始めるので、それは増加して、それらを束に詰める時間を増やしますHot module Replacement (HMR)更新の間の速度を上げる.
In Vite, HMR is performed over native ESM. When a file is edited, Vite only needs to precisely invalidate the chain between the edited module and its closest HMR boundary (most of the time only the module itself), making HMR updates consistently fast regardless of the size of your application.
それはあなたのアプリがどんなに大きいかに関係なく、それが提供するときに速度に影響を与えません.
あなたがバンドルベースのVSの間の速度の本当の比較テストを見たいならば
もはや利用できない記事
何が、スタイリングのためのローダ？
最も印象的なことの一つは、VITEが組み込みのサポートを提供することです.scss , .sass , .less , .styl , and .stylus ファイル.
LoaderやVite特有のプラグインをインストールする必要はありませんが、対応するプリプロセッサ自身をインストールする必要があります.
# .scss and .sass
yarn add -D sass
# .less
yarn add -D less
# .styl and .stylus
yarn add -D stylus
あなたが本当に問題のプラグインに集中できるように、次のセクションでチェックするつもりです
プラグイン,プラグイン,プラグイン
あなたのViteのアプリを強化するには、ここに私のトッププラグインのリストがあります.
プラグイン@ Vue
これはofficial plugin VEE 3 SFCコンポーネントをサポートするためにVITO REPOの内部にパッケージ化.
それは、VITEがフレームワークの不可知論であるという事実のために意味をなすことができます.
それを使用するには、次のあなたのvite.config.js// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [vue()]
}
アンスアンフー/ Viteプラグイン
安福
/
VITEプラグイン
ゼロの設定
PWAサポート用のクイックゼロ設定
npm i vite-plugin-pwa -D
yarn add vite-plugin-pwa -D
Viteに追加します.設定.js
// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'
export default {
plugins: [
VitePWA({
manifest: {
// content of manifest
},
workbox: {
// workbox options for generateSW
}
})
]
}
プラグイン/ Viteプラグイン
安福
/
VITEプラグイン
VITEのためのVueとのMarkdown
Markdownのこのローダを使用すると、マークダウンをvueコンポーネントとして使用し、マークダウンファイルにvueコンポーネントを使用できます
インストール
npm i vite-plugin-md -D
yarn add vite-plugin-md -D
Viteに追加します.設定.js
// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Markdown from 'vite-plugin-md'
export default {
plugins: [
Vue({
include: [/\.vue$/, /\.md$/], // <--
}),
Markdown()
],
}
プラグインのアイコン
安福
/
プラグインのアイコン
🤹 普遍的にオンデマンドのコンポーネントとしてアイコンのアクセス数千。
viteのvueコンポーネントとしてアイコンのアクセス数千
In Vite, HMR is performed over native ESM. When a file is edited, Vite only needs to precisely invalidate the chain between the edited module and its closest HMR boundary (most of the time only the module itself), making HMR updates consistently fast regardless of the size of your application.
最も印象的なことの一つは、VITEが組み込みのサポートを提供することです
.scss , .sass , .less , .styl , and .stylus ファイル.LoaderやVite特有のプラグインをインストールする必要はありませんが、対応するプリプロセッサ自身をインストールする必要があります.
# .scss and .sass
yarn add -D sass
# .less
yarn add -D less
# .styl and .stylus
yarn add -D stylus
プラグイン,プラグイン,プラグイン
あなたのViteのアプリを強化するには、ここに私のトッププラグインのリストがあります.
プラグイン@ Vue
これはofficial plugin VEE 3 SFCコンポーネントをサポートするためにVITO REPOの内部にパッケージ化.
それは、VITEがフレームワークの不可知論であるという事実のために意味をなすことができます.
それを使用するには、次のあなたのvite.config.js// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [vue()]
}
アンスアンフー/ Viteプラグイン
安福
/
VITEプラグイン
ゼロの設定
PWAサポート用のクイックゼロ設定
npm i vite-plugin-pwa -D
yarn add vite-plugin-pwa -D
Viteに追加します.設定.js
// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'
export default {
plugins: [
VitePWA({
manifest: {
// content of manifest
},
workbox: {
// workbox options for generateSW
}
})
]
}
プラグイン/ Viteプラグイン
安福
/
VITEプラグイン
VITEのためのVueとのMarkdown
Markdownのこのローダを使用すると、マークダウンをvueコンポーネントとして使用し、マークダウンファイルにvueコンポーネントを使用できます
インストール
npm i vite-plugin-md -D
yarn add vite-plugin-md -D
Viteに追加します.設定.js
// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Markdown from 'vite-plugin-md'
export default {
plugins: [
Vue({
include: [/\.vue$/, /\.md$/], // <--
}),
Markdown()
],
}
プラグインのアイコン
安福
/
プラグインのアイコン
🤹 普遍的にオンデマンドのコンポーネントとしてアイコンのアクセス数千。
viteのvueコンポーネントとしてアイコンのアクセス数千
// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [vue()]
}
npm i vite-plugin-pwa -D
yarn add vite-plugin-pwa -D
// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'
export default {
plugins: [
VitePWA({
manifest: {
// content of manifest
},
workbox: {
// workbox options for generateSW
}
})
]
}
npm i vite-plugin-md -D
yarn add vite-plugin-md -D
// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Markdown from 'vite-plugin-md'
export default {
plugins: [
Vue({
include: [/\.vue$/, /\.md$/], // <--
}),
Markdown()
],
}
npm i vite-plugin-icons @iconify/json -D
yarn add vite-plugin-icons @iconify/json -D
// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'vite-plugin-icons'
export default {
plugins: [
Vue(),
Icons()
],
}
<script setup>
import IconAccessibility from '/@vite-icons/carbon/accessibility'
import IconAccountBox from '/@vite-icons/mdi/account-box'
</script>
<template>
<icon-accessibility/>
<icon-account-box style="font-size: 2em; color: red"/>
</template>
Nuxt / Vite😍
何がNuxtでVITEを使用するか?それはカバーです.
NUXT / ベーテ
⚡ Nuxt 2によるVITE経験
Nuxt Viteをインストールします
(nuxt >= 2.15.0 is required)yarn add --dev nuxt-vite
# OR
npm i -D nuxt-vite
// nuxt.config
export default {
buildModules: [
'nuxt-vite'
]
}
プラグイン/コンポーネント
手動でコンポーネントをインポートするのはうんざり?もう言いません.
安福 / アンプラグインVueコンポーネント
📲 Vue用自動オンデマンドコンポーネント
npm i vite-plugin-components -D
#OR
yarn add vite-plugin-components -D
vite.config.js// vite.config.js
import Vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'
export default {
plugins: [
Vue(),
ViteComponents()
],
};
Windicssによるオンデマンドでの風の調整
ウィンディクス / VITEプラグイン
🍃 vdiのためのWindi CSS⚡️
npm i vite-plugin-windicss -D
#OR
yarn add vite-plugin-windicss -D
// vite.config.js
import WindiCSS from 'vite-plugin-windicss'
export default {
plugins: [
WindiCSS()
],
};
// main.js
import 'windi.css'
より多くのプラグインをチェックしたいならば、彼らはここでリストされます
ビタミン / 恐ろしいVite
⚡️ viteに関連する素晴らしいもののキュレーテッドリスト。js
恐ろしいVite。js
関連する恐ろしいもののキュレーテッドリストVite.js
目次
リストを探索する左上隅にある“目次”メニューを使用してください.
資源
公式資源
始める
create-vite - scaffoldingあなたの最初のViteプロジェクト.
create-vite-pwa - と同じscaffoldingオプション
create-vite , でもPWA ボックスのサポート.テンプレート
バニラ
vit-singlefile-gzip - 埋め込み用のVITEスターターテンプレート.
11st-Starter-Kit - 11 ty、風上のCSSとアルパインでVITEによって供給されます.js
Vue 3
Vitesse - 自発的なスターターテンプレート.
vite-vue3-tailwind-starter - Vue 3、VueルータとTarwind CSS.
vite-ts-tailwind-starter - Cookie、サイプレス.IO e 2 eテスト+ ci
vite-electron-quick - Vue 3、Typescript、電子11のスターターテンプレート.
vite-electron-builder - 電子アプリは、両方のバックとフロントエンドの自動リリースを使用してVITEを使用します.
vue-vben-admin - VeE 3、AntデザインVue、TypesScriptに基づくバックグラウンド管理テンプレート.
electron-vue-next - vue
あなたのフロントエンドのツールでステップアップする準備ができていますか?
Reference
この問題について(VITE 2から始める), 我々は、より多くの情報をここで見つけました https://dev.to/alvarosabu/getting-started-with-vite-2-1f4pテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol