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