Vue+Webpack+なにか

大体のことはAwesome見ればいいというものではなく、
Vue+Webpackをカスタマイズする記事です！

Vue+Webpack+なにか

vue-webpack-boilerplateをとりあえず入れる
Vueコンポーネントが基本になっている
使い方は簡単、vue-cliがしてくれる

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

Hot-Reloadingやエラーの表示など嬉しい

個人的な各種調整

これらは好み

Webpack importのaliasの扱いだけど、
Vueコンポーネントの時ぐらいにしようかなーと思うので

webpack.base.conf.js

-       '@': resolve('src')
+       '@': resolve('src/components')

にする

例えばrouter/index.jsなら

-   import Hello from '@/components/Hello'
+   import Hello from '@/Hello'

のようにかける
楽にかけるというよりか、相対指定することでVSCodeの静的解析が行われるようにしている

.editorconfigはなんとなく

[*.md]
trim_trailing_whitespace = false

を付け足す。

ESLintに関してはStandardが好きなのですが、
癖でダブルクオーテーションで書いたりして、
それをEslintのFixでパチンと一発で直していたのですが、
Vueファイルに対してはできなく、赤線で指摘されるのはかなりストレスなので、
Standardをwarnに変換したものをちょっと改変して使ったりします

実際にはmy-standard.jsonなどとして、extendsで相対指定をしてプロジェクトに合わせて上書きをするといった感じです

.eslintrc.json

{
  "extends": "./my-standard.json"
}

Warningも0にすべきとなってしまうんですけどね…
quotesルールは好きくないのでもう消しますか

というかたんにunusedが知りたいだけみたいなところあるし.eslintrc.jsでWebpackはWarnもオフにするとかの方がいいかな

こういう試行錯誤は数日立つと嫌になってくるからやるか悩みどころ

+ TypeScript

.tsファイルをよみこめるように

オレオレライブラリがTSだったりするので、読み込めるようにしておきたい

ts-loaderをいれます

$ npm i -D ts-loader

build/webpack.base.conf.jsを書き換えます

-extensions: ['.js', '.vue', '.json'],
+extensions: ['.js', '.ts', '.vue', '.json'],

略
以下全てをmodule/rulesに追加

{
  test: /\.ts$/,
  loader: 'ts-loader',
  include: [resolve('src'), resolve('test')]
},
{

最後にtsconfig.jsonをしたためます

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "bower_components"
  ]
}

お好みで。sourcceMap意味あるのかなぁ？
これでJS,Vueからimportできます

lang=”ts”を有効に

正直JSで間に合っているとは思いますが、
vue-ts-loaderを使えばよいかと（そのうちやってみるか？）

+flowtypeも試してみたいけどまずflowtypeを知るところからです

+ SCSS

sass-loaderを入れて、

$ npm i -D node-sass sass-loader

lang=”scss”書くだけ
最近のSCSSのVSCodeでの静的解析が凄すぎると思った。

webpack configの/vue/loadersになにか追加しよう的な記述をよく見ますが、何も変更しなくても動きました

+ Pug

旧Jade
HTMLは閉じタグがめんどいので

$ npm i -D pug pug-loader

あとは<template lang="pug">に変えるだけです
こちらも特にwebpackで設定をするといったことは必要ないです

+ MaterialDesign

大好きです

参考：Qiita:Vue.jsでMDL(material design lite)を使う時の注意

細かいことはまた追って書こうかな

+ Electron

Electron-Vueというボイラープレートがよい
https://github.com/SimulatedGREG/electron-vue

毎回おもうんですが、ボイラープレートってすごいけど、バランスが絶妙すぎて、
危なっかしいなとも思います

一つ一つのファイルが何をしているのかをある程度確認していくことは大事になるかもしれませんね

もうひとつ気になるのが、ボイラープレートに更新があったときどうするんだろうというもので、
さらにそれが結構致命的だった場合、とか

随時更新するかも！

このブログを検索

...