vue cliを使ってフロントエンドの実装を進めてみる
この記事は何？
以前Railsで作ったサンプルアプリのフロントエンド側の実装としてvueを使ってみようと思い、今更ではありますがvueの勉強をしてます。 幾つかサンプルを作成したので、今度はvue cliを使ってプロジェクトを作成し、より本格的な実装にしていこうと思い進めていました。 ただ序盤から躓いたので、忘れないために簡単にメモを残そうと思いました。
環境
いつもの通り環境構築から。 ただ最初にいきなり躓いた。
npm install -g @vue/cli
上記コマンドでvue cliをインストールしようと思ったが、
changed 903 packages, and audited 904 packages in 34s 91 packages are looking for funding run `npm fund` for details 9 vulnerabilities (3 moderate, 6 high) To address all issues possible (including breaking changes), run: npm audit fix --force Some issues need review, and may require choosing a different dependency. Run `npm audit` for details.
となり、ちゃんとinstall出来なかった。で、情けないことではあるが、試行錯誤してしまい、結局npm updateをした後に再度installコマンドを実行したら、無事installされた。よかった。
プロジェクト作ってみる
今回サンプルプロジェクトの名前をpinejuiceにしているので、それと同じ名前でプロジェクトを作成した。
vue create pinejuice ? Your connection to the default yarn registry seems to be slow. Use https://registry.npmmirror.com for faster installation? Yes Vue CLI v5.0.7 ┌─────────────────────────────────────────┐ │ │ │ New version available 5.0.7 → 5.0.8 │ │ Run npm i -g @vue/cli to update! │ │ │ └─────────────────────────────────────────┘ ? Please pick a preset: Default ([Vue 3] babel, eslint) ? Pick the package manager to use when installing dependencies: Yarn Vue CLI v5.0.7 ✨ Creating project in /Users/shinichirounakamura/project/pinejuice_vue_frontend/pinejuice. ⚙️ Installing CLI plugins. This might take a while... yarn install v1.22.19 info No lockfile found. [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... success Saved lockfile. ✨ Done in 132.84s. 🚀 Invoking generators... 📦 Installing additional dependencies... yarn install v1.22.19 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. ✨ Done in 39.33s. ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project pinejuice. 👉 Get started with the following commands: $ cd pinejuice $ yarn serve
プロジェクトが作成し終わったら、直下にプロジェクト名と同じ名前のフォルダがあるので、そこに移動し、サーバを実行してみます。今回の場合はyarnを使っているのでyarn serve です。
routingを追加する
ます最初にVue Routerを導入します。
npm install vue-router@4
vueの3系以降はrouterは4を使うようです。(github: https://github.com/vuejs/router)
これで準備は出来ました。そうしたら、やることは以下の点です。 - router用のindex.jsファイルを作成し、そこにroutingの定義を書く。書く内容は、どのパスの時にどのコンポーネントを使うかです。 - 各パスで使うvueコンポーネントの定義
ざっくりいうと上記２点です。
一旦今日はここまでにします。 続きは次回。
