Vue.jsを初めて使ってみる(part 1)

1 min読了の目安(約1100字TECH技術記事

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

  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>