フロントエンドでvueを使って簡単なペラページを作ることになったのですが、
- typescriptを使うように指示を受けている
- webstorm使えるけど、ほぼ未設定
という状態で右往左往したので、読んだものを備忘録でまとめます。
やったこと
- typescriptでvueの雛形を作る
- vueの雛形を元に、typescriptでの記法を学ぶ
...のは厳しかったので、日本語のリファレンスを読んで勉強 - IDE(webstorm)で、開発に困らない程度の設定する
- lint は、 TsLint
- formatter は、 prettier
- コード保存時に、 prettierが自動でかかるように修正
- configを別ファイルに切り出す
動作環境
$ npm -v
6.4.1
$ node -v
v10.14.1
vue --version
3.2.1
1. typescriptでvueの雛形を作る
非常に参考になりました。
https://qiita.com/nunulk/items/7e20d6741637c3416dcd
2. 日本語のリファレンスを読んで勉強
非常に参考になりました。
https://qiita.com/nrslib/items/be90cc19fa3122266fd7
ただ、 slotについては忘れてたこともあり、おおう？って感じでしたので、下記で勉強。
https://www.hypertextcandy.com/vuejs-components-introduction-slots
typescriptは最初らへんだけ、ここを読みました
http://js.studio-kingdom.com/
3. IDE(webstorm)で、開発に困らない程度の設定する
lint は、 tslint
後述するpritterの設定と競合する箇所があり、多少設定変更をした。
formatter は、 pritter
公式のドキュメント通り、npmでpritterをインストールした
https://pleiades.io/help/webstorm/prettier.html
コード保存時に、 prettierが自動でかかるように修正
prettierを保存のたびに手動で流すのが嫌だったので、webstormで設定。
https://qiita.com/kouchi67/items/6d3b5cf66f57c4ff6600
prettierの設定は、公式サイトの設定例がフォーマット例もあってわかりやすい。
https://prettier.io/docs/en/options.html#jsx-brackets
configを別ファイルに切り出す
DBの接続先等を外部ファイルにする。
https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode
dev-server の設定変更
npm run serve したときのサーバの設定変更をしたかったら、ここを参考にすると良い。
https://cli.vuejs.org/config/#devserver
https://webpack.js.org/configuration/dev-server/
ちなみに、 port を起動するだけなら、以下のファイルをルート直下におけば良い。
module.exports = {
devServer: {
port: 9000
},
}
蛇足
json-serverでmockサーバをつくる
サーバ周りがサクッと作りたいなーと思ったとき用。
vue-injection で、所定のパラメータを付与して起動した際にinject対象のサービスを切り替える実装がおっくぅなときに使えそうだと思った。
element-uiを使うとき
npm install -s element-ui
その後、main.tsに以下の追記
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)