Vue.js¶
Install¶
sudo apt install -y nodejs npm
sudo npm install -g @vue/cli
Quick start¶
vue-cliとか使って開発を始めると良く分からないので、とりあえず静的HTMLにVue.jsを読み込ませて動作を確認する。
以下参考
- https://qiita.com/omochironn/items/e2bad98d092935628380
- https://www.webopixel.net/javascript/1471.html
- https://qiita.com/koyo-miyamura/items/97b4fb92bc440887f4c0
- https://github.com/chiilog/vue_json_test/blob/master/index.html
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://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