vue-cli3事始めで読んだものの備忘録

vue-cli3事始めで読んだものの備忘録:

フロントエンドで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 を起動するだけなら、以下のファイルをルート直下におけば良い。

vue.config.js

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) 

webstormのショートカット

https://qiita.com/yoppe/items/f7cbeb825c071691d3f2