Vue.jsをさわる(Version2.x)

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

広告ここから
広告ここまで

目次

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

    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もそのうちやります。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark