どうもmiyachi（@_38ch）です。
フロントエンドVue.js、サーバーサイドFlaskで作る簡易SPAの作り方をまとめていきたいと思います。
少し長いと思うので、前半後半2回に分けて書いていきます。
まずはクライアントサイドを作成
まだvue-cliをインストールしていない場合はインストールします。
$ npm install -g vue-cli
まずは、プロジェクトのディレクトリを切ります。
ディレクトリ構成としては、大きくfrontendとbackendで区切っていくので、まずは、frontendディレクトリを作成しましょう。
$ mkdir flaskvue
$ cd flaskvue
$ vue init webpack frontend
vue initを実行すると、何個か質問がありますので、以下のように答えます。
? Project name frontend
? Project description A Vue.js project
? Author Miyachin <miyachin@xxx.com>
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
frontendディレクトリに移動して以下を実行します。
$ cd frontend
$ npm install
# npmインストール完了後に
$ npm run dev
ここですでに http://localhost:8080/ でブラウザで確認することができますが、ページの追加方法を見ていきます。
frontend/src/componentsにHome.vueとAbout.vueを新規作成します。
<template>
<div>
<p>Home page</p>
</div>
</template>
<template>
<div>
<p>About</p>
</div>
</template>
作成できたら、routerにこれらのテンプレートを登録していきます。
これはすでにある、frontend/src/routerのindex.jsに追記します。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
mode: 'history', //URLにでてくる#をけします。
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})
importのところと、routes:のところに、homeとaboutを追記しました。
これで、再度、http://localhost:8080/を確認して見ましょう。
http://localhost:8080/homeやhttp://localhost:8080/aboutで先ほど追加したテンプレートが表示されていることを確認できます。
これでfrontend側のstaticファイルの準備はほぼ整いました。これらのファイルをFlask（サーバーサイド）から読み込んでもらうために、build先を少し変更してあげます。
frontend/config/index.jsに修正を加えます。
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
ここの箇所を以下のように修正します。
// Template for index.html
index: path.resolve(__dirname, '../../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
できたら、frontendディレクトリ内で
$ npm run build
を実行します。
成功すると、frontendと同じディレクトリにdistというフォルダが生成されているはずです。
これは、frontend配下のhtml,css,JSのbundleになります。
後半では、このbundleをFlask側から読み込む方法を書いていきます。
Vue.js(vue-cli)とFlaskを使って簡易アプリを作成する【後半 - サーバーサイド編】
ソースコード
ソースコードはこちらにあげてます。もしお役にたったらStarください。
https://github.com/miyachin/vue-flask-sample