vue.jsとは
公式ページを引用すると以下のようになっています。
Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するための
プログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは
異なり、Vue は初めから少しづつ適用していけるように設計されています。中核となるライブラリは
view 層だけに焦点を当てているため、Vue.js を使い始めたり、他のライブラリや既存のプロジェクト
に統合したりすることはとても簡単です。一方、モダンなツールやサポートライブラリと併せて利用
することで、洗練されたシングルページアプリケーションを開発することも可能です。
印象
reactの開発を行った際は始める際にgulpやwebpackなど開発用のツールの知識を事前に学んだりする必要があったのですが、vueではvue-cliでテンプレートのプロジェクトから開始できるのがすごい便利でした(reactについても現在ではテンプレートプロジェクト作成ができるようだ"https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html")。一応fluxぽく実装することもできるようですが、それをやるならreactで良さそうな印象。fluxを使うまでもない単純なwebアプリとか作るのであればvue.jsを選べば良さそうに思います。
vue-cliによるプロジェクトの作成
ではvue-cliを使ってvue-cliのテンプレートプロジェクトを作ってみたいと思います。
$ npm install -g vue-cli
プロジェクト作成
$ vue init テンプレート名 プロジェクト名
vue-cliで使えるテンプレートは以下で確認できる。
https://github.com/vuejs-templates
起動
$ cd プロジェクト名
$ npm install
$ npm run dev
package.jsonを確認してみると"npm run dev"で"node build/dev-server.js"を実行していることがわかります。"webpack-dev-server"のタスクを直接実行するのではなくnode起動時にwebpackを実行するようにしているようです。初期状態でautOpenBroserが有効になっているのでnpm run dev実行で自動でブラウザが開くようになっています。
ビルド
$ npm run build
jsファイルのビルドが行われます。その際の設定などはだいたいconfig/index.jsにまとめられているようです。ビルド後のbase urlを変更したい場合はbuild.assetPublicPathを変更したら良いみたいです。
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
vueでの開発の流れを把握するためコンポーネントを追加してみる。
まずwebpack起動時にアクセスするページについてだが、これはindex.htmlになる。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my-project</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
ただindex.html内にはjavascriptを読み込む部分がないのだが、これはnode側がjavascriptを自動で返すようにしているためであり、
該当する設定はbuild/webpack.base.config.jsの以下の箇所になる。
module.exports = {
entry: {
app: './src/main.js'
},
これにより、node側がindex.htmlとともに読み込むjsファイルをまとめて返すようにしている。
それから、main.js内でルータを読み込んでいるのがわかるので対象のルータ(source/router/index.js)を確認して見る。
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
今回は最初に読み込むコンポーネントを追加したいと思うので、ここのルータに手を加える。とりあえず以下のように修正して見る。
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import myApp from '@/components/myApp'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'myApp',
component: myApp
},
{
path: '/hello',
name: 'Hello',
component: Hello
}
]
})
これで"http://localhost:8080/“でアクセスした際にmyAppコンポーネントが表示されるようになるので、今度はそのmyAppコンポーネントを以下のように定義しておく。
src/components/myApp.js
<template>
<div >
{{msg}}
</div>
</template>
<script>
export default {
name: 'myApp',
data () {
return {
msg: 'Welcome to my first app'
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
これでnodeを再起動したら自作したmyAppコンポーネントが表示されるはずである。初期状態だとvueのロゴが表示されていると思うがこれはmain.jsが最初に読み込んでいるコンポーネントであるApp.vue内で指定されているものなので、消す場合はApp.vueを修正したら良い。
公式ページのドキュメントが豊富なのであとはこれを参考にしたら開発を進めていけると思われます。
jp.vuejs.org
すでに公開されていて良さそうなコンポーネントは以下で探すことができる。
github.com
マテリアルデザインを適用するのであれば、Vue MaterialかVue MDL Documentationのあたりが良さそうな気がします。
Vue Materialの方はインストール時にcssが付いてきてそれをimportして使えば良いので自分はそっちの方が楽で使ってたりします。