vue-cliでインストールを行うとVue.jsの環境をものすごく簡単に構築できます。構築できるのは良いのですが、やはり中身を知っておいた方が良いと思うので、どの様なファイルができるのか簡単に書いていきます。
Vue.jsのインストール
公式に書いてある通り、vue-cliを使うのが一番簡単です
https://jp.vuejs.org/v2/guide/installation.html
$ npm install --global vue-cli
$ vue init webpack test-project
? Project name test-project
? Project description A Vue.js project
? Author xxxxxxxxxxxxxxxxx
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "test-project".
To get started:
cd test-project
npm install
npm run dev
プロジェクトネームの入力や、lint、テストライブラリ(Karma + Mocha)などのインストールを聞かれます。必要であればインストールしてください
$ cd test-project
$ npm install
$ npm run dev
実行すると勝手にブラウザが開いてVue.jsの画面が開くと思います。これだけで準備は完了です。
.
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package.json
├── src
└── static
それぞれのディレクトリ構成
src
src/
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── Hello.vue
├── main.js
└── router
└── index.js
ここに編集するvueのファイルを置いていきます。
最初期だと単一ファイルコンポーネントでの書き方になっています。
build
webpackの設定やserverの設定ファイルが置かれています。
build/
├── build.js
├── check-versions.js
├── dev-client.js
├── dev-server.js
├── utils.js
├── vue-loader.conf.js
├── webpack.base.conf.js
├── webpack.dev.conf.js
└── webpack.prod.conf.js
- build.js
-
npm run buildを実行したするときに参照されるファイル
-
- dev-server.js
-
npm run devを実行したするときに参照されるファイル
-
- webpack.xxxx
- ビルドツールであるwebpackの設定ファイル
- これでvue.jsのファイルをビルドしています
config
config/
├── dev.env.js
├── index.js
└── prod.env.js
その名の通り設定ファイルです。
ポートの指定などもこのディレクトリのindex.jsで行っています。
Vue.jsの動作の流れ
npm run dev
npm run devを実行するとindex.htmlに自動でapp.jsが読み込まれるようになっている。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test-project</title>
</head>
<body>
<div id="app"></div>
<!-- これが自動で挿入されている -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
build/webpack.dev.conf.jsに記載されている。HtmlWebpackPluginというもので設定されている。
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
inject: trueを設定するとリソースを全て読み込むようになる。
./src/main.jsを読み込む設定は、build/webpack.base.conf.jsに記載してある。
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test-project</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Vueの新しいインスタンスを作成している。elにappを設定しているので、index.html内のdivタグにマウントされる。
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
拡張子が.vueになっているのは単一ファイルコンポーネントの記法です。
<template>にhtmlを、<script>にjavascriptを、<style>にcssをそれぞれ一ファイルに書くようになっています。
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
}
]
})
App.vueでrouterが読み込まれています。
パスが/のときはそのままHelloのコンポーネントが読み込まれることになっているので、components/Hello.vueが読み込まれます。
components/Hello.vue
※必要な部分のみ抜粋
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
dataで持っているmsgの値を表示しているだけです。
vue-cliを使うとインストールがめちゃくちゃ簡単
簡単なんだけど中身の動作を知っている方が問題が起きたときに対処しやすいと思います。僕もwebpack周りはあまり素で触ったことがないので、これを機に少しいじってみようかと思いました。