Vite & Vueで構築されたオープンソースの静的サイトジェネレーター・「VitePress」 - かちびと.net
VitePressはVite & Vueで構築されたオープンソースの静的サイトジェネレーター（SSG）です。 VueのSSGといえばVuePressですが、VitePressはその後継的な存在となるようVue.jsが公式に開発しているもので、UXの改善、パフォーマンスの向上、より柔軟なカスタマイズを可能にするAPIなどを提供してくれるとの事です。 尚、VitePressの主な使用例の1つとして技術ドキュメントが挙げられており、このためのデフォルトテーマも用意されています。VuePressでドキュメントを作成する予定がある方はVitePressを検討されてみては如何でしょうか。ライセンスはMITとの事です。 VitePress
Svelte, Vite, TailWind.cssでプロジェクトを作成する
はじめに 目標設定としてSvelte、Vite、Tailwind.cssを扱えるようにする。 なぜTailWind.cssなのか まずは、レスポンシブに対応しているから。これは、自分が新しくアプリを作成する上でCSSを学ぶ時間を短縮できないかと思い、このフレームワークにたどり着きました。 Bootstrapでない理由としては、自分が実務で使用しているのでまだ使用ししたことのないもの、流行りの物を使いたかったのでこちらを採用しました。 なぜViteなのか 上記同様に、webpackは実務で使用しているので別のものを使用したかった。他にも色々ありましたが、Viteの開発者がVueの開発者であったことも参考にしました。esbuildなどのビルドツールもありましたがそちらはGo言語で、自分の好きな言語でもあるのでとても惹かれましたが、、、Viteもesbuildを使用した上で開発されていて、esb
Vite + Tailwind CSSでペライチHTMLをマークアップする
はじめに つい最近、ReactもVueも使わずに静的なペライチHTMLのマークアップを行う必要に迫られました。その際ViteのVanilla[1]テンプレートとTailwindを使った環境でマークアップをしたところ非常に快適だったので、環境構築の手順を記事にしておこうと思いました。 Viteを使う理由 ViteというとVueやReactの開発ツールと思われがちですが、UIライブラリに依存しないVanillaテンプレートが用意されています。 ファイルの更新を検知してブラウザへの反映といった基本的な機能に加えて、PostCSSのサポートもあるのでTailwindでの開発と相性が良いです。 セットアップ Viteでプロジェクトを立ち上げる普段の手順に加えて、Tailwindのセットアップを行います。 npm create vite@latest # project名を入力後、フレームワークでは「
ViteがLaravelにおけるデフォルトのフロントエンドアセットバンドラに
オープンソースのPHPによるWebアプリケーションフレームワーク・Laravelの開発チームは、これまで取り組んできたLaravelへのViteの統合に向けた作業の結果、 ViteがLaravelにおけるデフォルトのフロントエンドアセットバンドラになったことを、6月29日（現地時間）に発表した。 Viteは、Vue.jsなどに対応するフロントエンド開発ツールで、ネイティブESMによって要求時にファイルが提供されるのでバンドルが不要であり、HMR（hot module replacement）機能や、TypeScript／JSX／CSSのサポートなど、先進的な機能を備える。 LaravelとViteの統合にあわせて、Laravel BreezeおよびLaravel Jetstreamも更新されており、Laravelの開発チームは、LaravelとともにViteの使用を開始するにあたって、フロ
【完全解説】create-vueでVue3プロジェクト作成〜Vite爆速開発〜 | アールエフェクト
create-vueはVue公式のVueプロジェクト作成ライブラリです。npm create vue@latest(npm init vue@latest)コマンドを実行することでVueプロジェクトの骨組み(scaffolding)の作成とVueのアプリケーション構築に欠かすことできない機能を選択してプロジェクトに追加を行うことができます。本文書はVueの入門者の人がcreate-vueを利用してプロジェクトを作成する際に追加できるすべての機能がどのような役割を持っているのか理解できることを目的にしています。各機能の理解が進むことで機能追加時に迷うことなく自信を持って機能の選択を行うことができます。create-vueではビルドツールとして現在人気急上昇中のViteが利用されているのでViteについて動作確認をしながら説明を行なっているので開発環境と本番環境でのビルドツールの違いなども理解
2022年の最新標準！Vue 3の新しい開発体験に触れよう - ICS MEDIA
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
Vite + React で新規プロジェクトの開発環境を作ろう
2022年5月1日 JavaScript, React Viteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ Viteとは？ Viteを使えばベースのプログラムを予め準備しておいてくれているので、開発をすぐに始められるようになります。スターターキットとか、テンプレートみたいなものですね。他にも複数のファイルをひとつにまとめたり、SassをCSSに変換するなどの作業を爆速でできるようになります。 また、ファイルを保存すると同時に、確認画面も自動的に更新されます。ホット
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Svelte3で問い合わせフォーム作ってみた!｜Svelte｜Javascript｜開発ブログ｜株式会社Nextat（ネクスタット）
Engineering Education
vite-plugin-coffee on NPM
[Feature request] Support for coffeescript/livescript · Issue #1101 · vitejs/vite