Intro to Vue.js: Vue-cli and Lifecycle Hooks 日本語へ翻訳

Intro to Vue.js: Vue-cli and Lifecycle Hooks

Vue-cli and build processes

If you haven’t yet read the last section on Vue.js components and props, I highly suggest you do so before reading this section, otherwise, some things we’ll cover will lack context.

まだ前回の コンポーネントと props についての記事を読んでいなければ、そちらを読んでからこの記事を読むよう強く推奨します。そうでないと理解できないところがあるかもしれません。

Vue offers a really nice cli that gets you up and running with your choice of a few build tools, and really nice simple starter boilerplate. It’s a lovely tool. Before installing vue-cli, you might want to check that your versions of node, and npm or yarn are up-to-date. You’d first want to install vue-cli (the -g helps you install it globally)

Vue.js は素晴らしい CLI を提供しており、これをつかえば素早く作業ができ、しかも少ないツールで済みます。また非常にシンプルなスタート用のテンプレートも用意されています。本当に素晴らしいツールです。vue-cli をインストールする前に、ノードと npm もしくは yarn のバージョンが最新のものになっているか確認しましょう。その後にインストールします。 (訳注:npm が2系だと動かなかったので、私は node を 7系、npm を3系にしたところ動いた)

$ npm install -g vue-cli

There are many builds available to you, but in our example, we’ll use webpack:

ビルドの方法がたくさんありますが、ここでは webpack を使うことにしましょう。

$ vue init webpack <project-name>

You can go through the commands that the output will give you, which will help you cd into the directory, install everything, set up your `package.json` file, and then finally serve up a local dev server at localhost:8080 with the command:

このコマンドを実行すると、Vue.js は必要なもの一式を作成し、そのディレクトリに移動し、必要なものをインストールして、package.json ファイルも生成してくれます。そして次のコマンドを実行すると、ローカル開発サーバーを立ち上げてくれます。(訳注:と書いてあるが、ディレクトリに自分で移動し、インストールも自分でnpm init でしなくてはいけない。vue-cli のバージョン2.8.1の場合)

$ npm run dev

You’re up and running! I love that the setup is so clean. You’ll start off with an App file in your `/src/` directory with a `Hello.vue` file in the `/components/` directory. This is really nice because you can see already how you’d set up these files, and how imports and exports might work.

さあ走り出しました。非常に簡潔なこのセットアップ手順を愛しています。では手始めに/src/ディレクトリの中の/components/ディレクトリ内のHello.vue ファイルを見てみましょう。これをみればファイルをどうセットアップして、インポートやエクスポートをすればいいかわかるので便利ですね。

Let’s go over this new `.vue` file extension for a moment, because if you haven’t worked with vue, you won’t have come across it before.

「.vue」拡張子がついたファイルについて少し説明をします。Vue.js に取り組んだことがない人は初めてみるファイルだと思いますので。

In your `.vue` file, you can place everything you need for your component. We no longer have to wrap our templates in <script type=”text/x-template”>, now we’ll more semantically create files that follow this logic:

.vue ファイルにはコンポーネントを作成するために必要なものを配置します。今回はもう面倒な<script type=”text/x-template”>を書く必要はなく、次のようにより見通しのいい書き方ができます。

I’ve made a repo of Vue snippets for Sublime Text to quickly spin up boilerplate like this for `.vue` files (this is what the snippet vbasewould output). There’s also this one for atom, (though it specifies version 1+, and Vue is at v2), and this for vscode.

A few things to note here: just like in React, you have to return exactly one enclosing tag, here I’ve used a div. I’ve also used <g>elements in SVG. It can be anything, but the entire template must be wrapped in the one tag.

You’ll see that we’ll use export default here to write our scripts such as the data function or methods we used previously, but if we were to use components as children in this `.vue` document, we would also have to import them (more on this in a minute).

Leave a Reply

Your email address will not be published. Required fields are marked *