Month: October 2022

[Vue.js]Viteを導入してみる

早い早いと話題のVite(ヴィート)。フランス語で「素早い」の意味らしいです。
Webpackではアプリケーション起動前に、アプリ全体を走査し依存を解決→バンドルしたソースを出力という流れだったのに対し、ViteはNative ESModulesのimportを利用し、ブラウザから直接モジュールを読み込むことで高速化を実現しています。

モジュールバンドラーRollup を使用してコードをバンドル…とあるので、ノーバンドルツールと言われつつもバンドルしない訳ではないようです。

この辺りの解説はANTEZさんの記事やっぱりwebpackがわからない（エピソード1）が超絶わかりやすかったです。

プロジェクト作成

前提

Viteを使うには、Node.jsが14.18+、16+でなければなりません。

% cd projects
% npm create vite@latest
Need to install the following packages:
  create-vite@3.2.0
Ok to proceed? (y) y
✔ Project name: … vite-app
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /Users/meow/Documents/projects/vite-app...

プロジェクト名や使用するテンプレートはオプションでも指定可能。

# npm 6.x
npm create vite@latest my-vue-app --template vue

とりあえず起動

npm install
npm run dev

テーン！！

後からわかったのですが、`npm create vite’でプロジェクト作成した時はstoreやらrouteやらを自分で入れなければいけないみたいですね。というわけでこちらにまとめました。

[Vue.js]続・Viteを導入してみる

Vite / vue.js / vue3

ほか参考

Vite

 [VSCode, Prettier]勝手にダブルクォーテーションにしないで

VSCodeでプロジェクトをクローンしてきたら、保存時にPrettierさんがシングルクォーテーション（”）をダブルクォーテーション（””）に変えてくれていました（嫌味）。
どちらがいいかはまあ…宗派や使用しているツールに依る思いますが、既存のプロジェクトで勝手に変えられるのは困ります。

と言うわけで設定を変更。
Setting （Ctrl + ,）の検索窓から「Quote」で検索し、検索結果のサイドメニューからPrettierを選択。

2つのチェックボックスにチェックを入れます。

お疲れ様でした。

と思いきや

全然直ってませんでした。

Prettierの設定ファイルを作成

プロジェクトディレクトリ直下に.prettierrcファイルを作成し、

以下を記述。

{
  "singleQuote": true,
}

今度こそ直りました。

他にも希望の設定を付け足せます。

{
  "semi": false,
  "arrowParens": "always",
  "trailingComma": "es5",
  "singleQuote": true,
  "quoteProps": "preserve",
  "endOfLine": "auto"
}

参考

https://stackoverflow.com/questions/48864985/vscode-single-to-double-quote-automatic-replace


Quotation mark (引用符) / シングルクォーテーション（”） / ダブルクォーテーション / VSCode / Prettier