Slack風のUIをvue,node,npmを使って作る

学習タイトル

１．Slack風UIを作ろう

開発環境

使ったツール、コマンド、言語等の情報を記述。
言語：vue.js

学んだこと

・node
javascriptの開発環境を作るにはnodeが必要。nodeというのは、javascriptでサーバサイド側を扱える言語。

・npm
nodeのパッケージを管理するツールと言われているnpmが使える。
ターミナル上でnpm run devと打つと環境を立ち上げることができる。
(package.jsonというファイルのscriptにdevというコマンドが必要)

・vue
vueはコンポーネントを組み合わせて作成していく。
コンポーネントとは、html,css,javascriptなどの言語を一つのファイルにまとめたものをいう。
vueファイルを読み込ませたい場合は、importとexportを使うことで、読み込ませたいファイルと出力させたい値を記載する。

index.vue

<template>
   <div id="container">
      <定数名 />  <!--この部分で出力される-->
   </div>
</template>

import 定数名 from '~/フォルダ名/ファイル名'

export default {
   フォルダ名： {
      定数名
   }
}

vueには以下フォルダがあるが、それぞれ意味がある。
・pages
→ルーティングのようなもの。例えば、pagesフォルダ内にtest.vueファイルがある場合、
ローカルの開発環境、http://localhost:3000/test
でtest.vueファイルが確認できる

・components
→コンポーネントファイルを入れておくフォルダ。

・layouts
→共通のレイアウトファイルを入れておくフォルダ。

・scoped
styleタグにscopedが書かれたcssはその他のファイルには適応されず、scopedと書かれたファイルのみ適応される。