Flask
Python3
Vue.js
vue-cli

Vue.js(vue-cli)とFlaskを使って簡易アプリを作成する【前半 - フロントエンド編】

vueflask.png

どうも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

image.png

ここですでに http://localhost:8080/ でブラウザで確認することができますが、ページの追加方法を見ていきます。

frontend/src/componentsHome.vueAbout.vueを新規作成します。


Home.vue

<template>

<div>
<p>Home page</p>
</div>
</template>


About.vue

<template>

<div>
<p>About</p>
</div>
</template>

作成できたら、routerにこれらのテンプレートを登録していきます。

これはすでにある、frontend/src/routerindex.jsに追記します。


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/homehttp://localhost:8080/aboutで先ほど追加したテンプレートが表示されていることを確認できます。

image.png

これでfrontend側のstaticファイルの準備はほぼ整いました。これらのファイルをFlask(サーバーサイド)から読み込んでもらうために、build先を少し変更してあげます。

frontend/config/index.jsに修正を加えます。


index.js

    // Template for index.html

index: path.resolve(__dirname, '../dist/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',


ここの箇所を以下のように修正します。


index.js

    // 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を使って簡易アプリを作成する【後半 - サーバーサイド編】


参考

Full-stack single page application with Vue.js and Flask


宣伝

プライベートでWalicaという立替清算最適化アプリを作っているのでもしよかったら、使ってみてください。

Custom Preset.png