{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/create-base-vue-project",
  "path": "/posts/create-base-vue-project",
  "publishedAt": "2022-10-24T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "vue",
    "プログラミング",
    "ベースプロジェクト",
    "個人開発",
    "効率化"
  ],
  "textContent": "特にタイトル以上に説明することもないので、進めていく。\n\nViteを使用しVueをインストールする\n\n下記コマンドでVite（ヴィート）を使用しVueをインストールすることができる。\n\n今回はVueプロジェクなので、frameworkはVueを指定し、もう考えることなくTypeScriptを指定する。\n\nで、上記のように指示に従いlocal\nserverを立ち上げることができればVueのインストールは完了。\n\nnodeのバージョンを指定する\n\nnodeのバージョン管理ツールにVolta使用しているので、Node エンジンの固定をする。\n\n上記を実行するとpackage.jsonに、\n\nと記入され、Volta の設定が記述されたpackage.jsonをチームで共有することで、全員の Node や npm、Yarn のバージョンを揃えることができる。\n\nTailwind.cssを導入する\n\nもうクラス名を考えたくないので、基本的にtailwindを使用している。\n\nということで本プロジェクトにデフォルトで入れる。\n\nインストール方法は公式（Install Tailwind CSS with Vite）に従う。\n\nInstall Tailwind\n\n下記コマンドを順に実行する。\n\nやっていることは、tailwindのインストールと設定ファイルの作成。\n\nConfigure your template paths\n\n続いて、パスを構成する。\n\ntailwind.config.cjsを、\n\n上記のように修正。\n\nAdd the Tailwind directives to your CSS\n\n最後に、./src/style.cssにtailwindを追加する。\n\nこれでtailwindが有効になった。\n\nSVGをコンポーネント化する\n\nSVGの取り扱いについても面倒なので、ライブラリに頼る。\n\nいままではvue-svg-spriteを使っていたのだが、設定が面倒くさい＆今回はViteでプロジェクトを作成したので、vite-svg-loaderを入れる。\n\nまあ、vue-svg-spriteはいろいろ設定できて便利だったけど、正直そこまでSVG使わないので。\n\ninstall vite-svg-loader\n\n上記のコマンドでインストールする。\n\n続いて、設定していく。\n\nvite.config.tsに\n\n上記をインポートし、pluginsの箇所に、\n\nを追加する。\n\n結果的に、下記のようになっていれば問題ない。\n\nこれで設定は完了なので、あとは使用していく。\n\n3つの使用方法\n\nURL、文字列、コンポーネント、それぞれ３つの方法でインポートすることができる。\n\n試しにやってみる。\n\n下記のようにインポートして、\n\n下記のように使用する。\n\nデフォルトはコンポーネントなので、パラメーターが明示されていない時はコンポーネントで使用となる。\n\n使用するのはこれくらいかしら。\n\nコードのフォーマット系は別にまとめる。\n\n作成したプロジェクトはこちら。",
  "title": "毎回調べるのが面倒なのでVueのベースプロジェクトを作成する"
}