Help us understand the problem. What is going on with this article?

Vue CLI UIを使ってプロジェクト作成

More than 1 year has passed since last update.

はじめに

とあるきっかけで自分で未習得のVue.jsを勉強がてら導入しようということになりまして。
まずはインストールから始めたわけですが、手順通りやったつもりがどうやらしくじったらしく、先生と同じ画面が出ない。バージョンの違い?
折角なので、そのあたりをQiitaにまとめていきましょう!という事に。

しかも、Vue CLI UIを使って修正とかできればなおハッピーみたいに言われたのでこれまた勉強です。ちょっと知識が偏ってしまっているので、よい機会です。

前提条件

  • Vue.js 3.1.1

触ってみよう

Vue.jsのインストールは特記するほどでもないので省略。
この状態でCLIを使ってプロジェクトまで作成済み。

project.png

Vue CLI UIもインストール済みで起動してみます。

vueui.png

見事にないと言われました。でもよく見たらインポートってコマンドが見えるのでやってみます。
import.png

impafter.png
できたみたいです!
変更を行いたかったので、左バーにある依存のアイコンをクリックしてみると、
import2.png
すでにimport済みなFont awesomeとかが見えました。
これで更に追加してみます。右上の依存をインストールをクリックし、プラグイン検索でfortawesomeと入力すると、
some.png
一覧で出てくるのでやりやすいですね。
free-regular-svg-iconsを追加してみます。
some2.png
簡単に追加できました。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away