Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

ソースコード

ソースコードはこちらにあげてます。もしお役にたったらStarください。
https://github.com/miyachin/vue-flask-sample

参考

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

mitch0807
猫と銭湯が好きな文系出身若手エンジニアです。 大学ではコンピューターサイエンス学んでないので、お手柔らかにお願いします。
https://miyach.in
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away