Vue.jsを初めて使ってみる（part 1）

ローカル環境にVue.jsをインストールする

vue.js公式サイト（https://cli.vuejs.org/guide/installation.html）を参照することをおすすめします。

1. ターミナルでインストールのコマンドをうつ

   npm install -g @vue/cli
   

2. プロジェクトを作成する

   vue create hello_world
   

3. プロジェクトをlocalhostで実行する
   すばらしいことにVue.jsはGUIでプロジェクトを実行してそのアナリティクスを見たり、GUIからプロジェクトを作成することもできるので初心者でも躓かずに進められる気がします。

   vue ui
   

   GUIを使いたくない場合は

   npm run serve
   

   でlocalhostで実行することもできます。

   ---

コンポーネントを作る

Vue.jsではReactのようにコンポーネントを作って何度でも再利用できます。
vue create hello_worldでプロジェクトを作成したときに生成されたsrcフォルダー内のApp.vueとsrc/componentsフォルダー内のHelloWorld.vueの部分です。

1. 新しいコンポーネントを作るにはまず、src/componentsフォルダー内に名前.vueという名前で作成します。
2. コンポーネントの書き方は以下です。（個人的にjs、css、htmlがきれいに分かれていて好きです。）

   <template>
   	<div>
   			HTML要素
   	</div>
   </template>
   
   <script>
   スクリプト関係
   </script>
   
   <style scoped>
   CSS関係
   </style>
   

3. メソッドを作る。
   <script></script>タグ内にexport default{}と書き、{}の中にmethods: {関数名: function(){処理内容}}を記述します。例としては、

   export default {
   	methods: {
   		print_something: function() {
   			 console.log("Something");
   

4. オンクリックイベントでメソッドを使う。

   <button v-on:click="print_something">print!</button>