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

![vueflask.png](https://qiita-image-store.s3.amazonaws.com/0/209160/4840dec5-8671-ab14-a6e8-8798a2a1f8a3.png)

どうもmiyachi（[@_38ch](https://twitter.com/_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](https://qiita-image-store.s3.amazonaws.com/0/209160/f854d5a8-b89a-3bd0-ff7a-f208ebc24ef4.png)

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


`frontend/src/components`に`Home.vue`と`About.vue`を新規作成します。

```html:Home.vue
<template>
  <div>
    <p>Home page</p>
  </div>
</template>
```

```html:About.vue
<template>
  <div>
    <p>About</p>
  </div>
</template>
```

作成できたら、routerにこれらのテンプレートを登録していきます。
これはすでにある、`frontend/src/router`の`index.js`に追記します。

```javascript: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)を確認して見ましょう。
[http://localhost:8080/home](http://localhost:8080/home)や[http://localhost:8080/about](http://localhost:8080/about)で先ほど追加したテンプレートが表示されていることを確認できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209160/7efed090-e04e-755f-99cf-421a15f9b789.png)


これでfrontend側のstaticファイルの準備はほぼ整いました。これらのファイルをFlask（サーバーサイド）から読み込んでもらうために、build先を少し変更してあげます。
`frontend/config/index.js`に修正を加えます。

```javascript:index.js
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
```
ここの箇所を以下のように修正します。

```javascript: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を使って簡易アプリを作成する【後半 - サーバーサイド編】](https://qiita.com/mitch0807/items/c2e84beee6c9a61e86cd)

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

## 参考
[Full-stack single page application with Vue.js and Flask](https://codeburst.io/full-stack-single-page-application-with-vue-js-and-flask-b1e036315532)