Vue.jsをさわる（Version2.x）

「Vueってどうなんですか？」って聞かれることがちょいちょい出てきたので、ちょっとくらい触っておこうかなということで。 Hello World とりあえず使うのであれば、CDN版を利用することでnpmコマンドをつかわず […]

「Vueってどうなんですか？」って聞かれることがちょいちょい出てきたので、ちょっとくらい触っておこうかなということで。

Table of Contents

Hello World

とりあえず使うのであれば、CDN版を利用することでnpmコマンドをつかわずともVueを利用することができます。

index.html

<html>
  <head>
    <title>Hello vue</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>
  </body>
</html>

最低限必要なのはこれだけです。elでセレクタを指定して、dataに値を入れていくようなイメージでしょうか。実行結果はこんな感じになります。

簡単ですね。

カスタム要素を組み合わせてみる

もうちょっと複雑にするとこうなります。

<html>
  <head>
    <title>Hello vue</title>
  </head>
  <body>
    <div id="app-7">
      <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
      </ol>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
      })
      new Vue({
        el: '#app-7',
        data: {
          groceryList: [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Cheese' },
            { id: 2, text: 'Whatever else humans are supposed to eat' }
          ]
        }
      })
    </script>
  </body>
</html>

コードを読んだ感じですと、#app-7のタグに対してgroceryListという配列をバインドして、v-for="item in groceryList"でループさせているようなイメージでしょうか。

独自タグを普通にタグとしてかけるようになってるのは良いですね。

Vue-cliを入れてみる

Angularもそうでしたが、VueもCLI使うのがデフォルトっぽいのでこれも入れておきます。

$ npm install --global vue-cli
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue
/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
+ [email protected]
added 254 packages in 7.4s

$ vue --help

  Usage: vue <command> [options]

  Options:

    -V, --version  output the version number
    -h, --help     output usage information

  Commands:

    init           generate a new project from a template
    list           list available official templates
    build          prototype a new project
    help [cmd]     display help for [cmd]

Vue-cliでプロジェクトをたちあげてみる

vue init {ボイラープレート名} {ディレクトリ名}で新規プロジェクトを作れるみたいです。Routerの有無やESLint / Unit test / e2eテストなどの設定も対話形式で入れれる様子です。

$ vue init webpack my-project

? Project name my-project
? Project description A Vue.js project
? Author hideokamoto <[email protected]>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-project".


# Installing project dependencies ...
# ========================


# Project initialization finished!
# ========================

To get started:

  cd my-project
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

cd my-project && npm run devを実行すると、サンプルアプリが立ち上がります。

postcssやbabel / webpackまわりのファイルも全部自動生成してくれています。

$ ls -a
.			.eslintrc.js		config			src
..			.gitignore		index.html		static
.babelrc		.postcssrc.js		node_modules		test
.editorconfig		README.md		package-lock.json
.eslintignore		build			package.json

ここまで触っておけば、ちょいちょい話題になるNuxtも触れそうかなと思ってます。

Nuxtもそのうちやります。