212
230

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-05-27

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

212
230
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
212
230

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?