![見出し画像](https://assets.st-note.com/production/uploads/images/162096115/rectangle_large_type_2_ec954d5decc37d1c12666a54b3985c5d.jpeg?width=1200)
Vue.js初心者🔰選手権
お疲れ様です。
JavaScriptも怪しいのにフロントエンドをやったりするデザイナーです。
今年にコンポーネントという概念を知ったのとVue Fes 2024にスタッフとして参加させていただいたご縁もありましたので、フロントエンドの勉強かねてVueを触ってコンポーネント化を1からしてみることにしました。
おや…?
早速、いつも通りHTMLとCSSをざっくり書いて調べた記事を参考に.vueのファイルを作り、<component>タグも記載した.htmlファイルをクリックしてブラウザに反映…されない…?
ターミナル
そういえば以前ターミナルからコマンドを入力しないとブラウザでファイルが開かなかったなぁと思い出し、メモから発掘したコマンドをターミナルに記入。お、動いた…?
初心者、勘違いをするの巻
あれ?コマンド違うみたい…となりインストールをする必要があるのではと思い始め…。
もしかして従来のHTMLとCSSのファイルに打っ込むことでコンポーネント化ができるわけじゃなく、先にVueくんを招き入れてVueくんの懐に入れてもらうタイプ…?!
初心者、原点に立つ
ネットのエンジニア玄人の記事じゃダメだ、初心者記事を探さねば…!!
4.Vue.jsをインストールして、プロジェクトを生成、起動しよう
a. vue-cliでプロジェクトを作成しましょう
たぶんそうだ!!
参考にしてた記事で一からVueファイルありきで構成した人もいたかもだけど、やりやすいように構成が用意されているやつだ!!
それで必要なファイルがないままビルドしてたから何も起きなかったんだ!!
ということで初めからこの手のファイルの認識がずれていたとわかり、再構成し直すことに。
割と序盤で気が付けてよかったと思おう。
フロントエンドの道、まだまだ先は遠そうです。
いいなと思ったら応援しよう!
![ゆえみる](https://assets.st-note.com/production/uploads/images/16255488/profile_9b7c61f01dffbc6cd73803e637c89d99.png?width=600&crop=1:1,smart)