Vue.js¶

Install¶

sudo apt install -y nodejs npm
sudo npm install -g @vue/cli

Quick start¶

vue-cliとか使って開発を始めると良く分からないので、とりあえず静的HTMLにVue.jsを読み込ませて動作を確認する。

以下参考

Development¶

Client Side¶

vue create するときはManualを選択して、以下のパッケージを追加しておく（それ以外はデフォルトのままEnter）
- Routing
- CSS Pre-processors
- Unit Testing

mkdir example-ui
cd example-ui
vue create clientside
cd clientside
npm install
npm run serve

REST APIに対応していく

cd ~/example-ui/clientside
npm install axios --save

src/App.vue

<router-link to="/metrics">Metrics</router-link>

src/router.js

import Metrics from './views/Metrics.vue'
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/metrics',
      name: 'metrics',
      component: Metrics
    },
  ]
})

Server Side¶

sudo apt-get install -y git python3-venv
cd example-ui
PROJECT=$(basename ${PWD})
python3 -m venv ~/.virtualenvs/${PROJECT}
ln -s ~/.virtualenvs/${PROJECT}/bin/activate
source activate
pip install flask

メモ¶

Djangoでjinja2レンダリングしちゃうとVue.jsに渡す {{ }} をレンダリングしようとして失敗するので、一部だけ {% verbatim %} と {% endverbatim %} で囲って誤魔化した

Chart.js¶

vue-chart.js を使うくらいなら、自分でchart.jsを叩くcomponentsを作ってwebpackした方が良い気がする。（と思ったけどwebpackの初期セットアップ面倒くさすぎ）

https://vue-chartjs.org/guide/#introduction

npm install vue-chartjs chart.js --save

Webpack¶

https://ics.media/entry/12140/

npm install webpack --save

参考¶

Vue.js(vue-cli)とFlaskを使って簡易アプリを作成する
- https://qiita.com/mitch0807/items/2a93d93adbf6b5fc445c
- https://qiita.com/mitch0807/items/c2e84beee6c9a61e86cd
https://noumenon-th.net/programming/2019/03/01/axios/
http://hiramatch.hatenablog.com/entry/2018/12/05/142149
https://qiita.com/567000/items/dde495d6a8ad1c25fa43
Vue の export default と import / https://www.shookuro.com/entry/2018/09/22/172636
export default ってなに？ / https://qiita.com/masash49/items/e71319eef82619d19cd8
Basic Vue http://one-way.tech/programing/basic-vue-js/
Vuejs formをサブミットするときのポイント https://qiita.com/kimullaa/items/c60a5a229b9060177a48

最終更新日: 2021-05-22 13:37:13