【Vue CLI 3】プロジェクトテンプレートを作りたくて
Vue CLI 3になってプラグイン&プリセットというコンセプトになった。
これに沿う形でプロジェクトテンプレートを作りたい。
リモートプリセットを作ってみた。
vue create --preset yoko0180/vue-cli-preset-basic-project hello-vue
このコマンド1つでプロジェクトがテンプレートから作成できる。
ただしオンラインが条件。
はじめはローカルで動作すれば十分と考えていたが、スッキリしない部分があったので路線変更した。スッキリしない部分は後述。
プロジェクトのテンプレートとして次を使う。
- Vuex
- stylus
- pug
vuexとstylusはvue cliが設定を提供してくれる。
pugはローダーを追加してくれるプラグインがnpmにあった。
(https://www.npmjs.com/package/vue-cli-plugin-pug)
ローダーを追加してくれるだけなので.vueコンポーネントの記述をpugに変換してはくれない。
今回は変換するプラグインを作るのは難しいので、予め用意したテンプレートの.vueファイルに差し替えることでpug記述にするプラグインを作ってみた。
冒頭のコマンドができるまでのアウトラインは次のようなもの。
- ローカルでpub記述に差し替えるcliプラグインを作る
- 1をサンプルプロジェクトにローカルで適用して動作を確認する
- 1をnpmにpublishしてvue add <plugin name>で実行できるようにする
- cliプリセットを作成してgithubにpushする
(前述のスッキリしない部分)
上記2では次のようにコマンド実行する。
yarn add -D file:..\vue-cli-plugin-pug-template
Vue CLI 3 プラグインのコンセプトとして次のようなコマンドでプラグインを適用できる。
vue add pug-template
これが動作するためにはvue-cli-plugin-pug-templateがnpmにpublishされている必要がある。
とにかくプロジェクトを作るときにごちゃごちゃしたくなかったのでpublishしてみた。
publishするにはnpmにユーザ登録してnpm publishすればいいのだが、ユーザ登録としてメール認証(メールにリンククリックしてとくるやつ)をする前にpublishしようとしてエラーになるということをやらかしたが、結果よしとする。
node.jsで環境変数Pathに設定済みか確認する
path_search.js
var word = process.argv[2] if (!word) process.exit(0) var reg = new RegExp(word, 'i') console.log(process.env.Path.split(';').filter(p => p.match(reg)))
使用例
node path_search.js windows [ 'C:\\Windows\\system32', 'C:\\Windows', ...(※省略) ]
Windowsの環境変数管理が非常にとても極めて実に使いづらくてパス設定を確認するのにうんざりした。 なので最近よく使っているnode.jsで確認用スクリプトを書いた。それだけ。
bitbucketでプライベートリポジトリにnpmモジュール置いて使う
シチュエーションは限られるけどメモ。
1.Bitbuketで公開鍵登録しておく
プライベートリポジトリの場合なので。
(参考)
SSH認証鍵をBitbucketに設定 - Qiita
2.プロジェクトに追加する
yarn add ssh://git@bitbucket.org/<アカウント名>/<リポジトリ名>.git
バージョン選択する場合が多いからこっちか。
yarn add <git remote url>#<branch/commit/tag>
(参考)
yarn add | Yarn
※追記
なんだか、Windows環境でも特に気にせず認証できていたのにできなくなった・・
そもそもできていたのが不自然なのか・・?
忘れているだけで以前にごにょごにょしていた結果使えていたのか・・
とりあえず参考ページを貼っておく。
CSS transitionに触れる
CSS transitionに触れてみた
※「触れる」と書いて、「ふれる」「さわれる」と読めるのって紛らわしい・・
See the Pen transition by yoko0180 (@yoko0180) on CodePen.
アニメーション関連の技術は自分の中で優先度が低いのだが、
機会があったのでやってみた。
記述例1
transition: background-color 1s linear 0
記述例2
transition: width 1s linear 0 , height 1s linear 0;
transition [property] [duration] [timing] [delay]
property 効果を適用するCSSプロパティ名を指定する
duration 変化に掛かる時間を指定する
timing-function 変化のタイミング・進行割合を指定する
ease 開始と完了を滑らかにする(初期値)
linear 一定
ease-in ゆっくり始まる
ease-out ゆっくり終わる
ease-in-out ゆっくり始まってゆっくり終わる
delay 変化がいつ始まるかを指定する
考え方
基本スタイルにtransition書いて、変化後のスタイルを用意してそれをクラス適用して変化させる
transformプロパティで変化をスタイルできるので変化後のスタイルとして定義する
記述例
transform translateX(300px)
主な関数
scale(X方向の縮尺比率, Y方向の縮尺比率)
rotate(回転角度)
translate(X方向の移動距離, Y方向の移動距離)
translateX(X方向の移動距離)
translateY(Y方向の移動距離)
ついでにCodePenの埋め込みもしてみたかったのでそれもやってみた。
CodePenの埋め込みは該当ページで画面右下の「Embed」をクリック。
ポップアップがでるのでデフォルトビューなどを設定して
下部に表示されているコードをコピペする。
ローカルにプロジェクトフォルダが多くてどこに何があったかわからなくなるのでElectronでなんとかしようとしてみている
問題点
- Vue.jsやらPythonやら.NETやら規模も大小様々なプロジェクトフォルダが多数あってどこにどのようなプロジェクトがあるのか把握が難しくなっていた
- VS CodeやらPycharmやらで開くのにも最近のアクセス一覧から外れてしまったり、プロジェクトフォルダ名だけで探すことが辛くなってきていた
作ってみているもの
概要
- コメントとパスをアイテムとして登録できる
- ストア先はlocalStorage
- アイテムを文字列フィルターできる
- アイテムにはイメージファイルをつけて表示できる
- アイテムごとにワンクリックでパスをVS Code、pycharmによって開ける
- 開いた日時をアクセス日時として記録して表示順に反映
- パスが示すファイル、ディレクトリの物理削除ができる
- (ついでに実装)git cloneがリポジトリURLペースト、クリックでできる。同時にアイテム登録
現状
まだまだ感はあるが、それなりに便利。
とりあえずでもいいからブログにでも記録して少しでも達成感をだしておく。
所感
この手のOSネイティブに動作する必要があるものをなんとかしようとすると 今までこれといった解決策が見つけられなかった。 Vue.jsのような技術に慣れてしまうと.NETのような手続きはとても煩雑に感じる。 ネイティブかつ簡潔に実現できる手段としてElectronは期待している。 Webpack + Vue.js + Vuex + Electron + Pug + Stylus この辺は素晴らしい技術である。
【翻訳】npm-scripts
npm-scriptsのドキュメント冒頭が読みにくかったので整形ついでに翻訳。
マークダウン変換サービスも便利なので一応手順もメモ。
(手順)
1.ドキュメントをテキストエディタにペースト
2.テキストエディタで適当に絡む区切りをタブに置換するなどしてざっと整形
3.エクセルペースト
4.説明部分をGoogle翻訳にペースト
5.翻訳結果をエクセルにペースト
6.マークダウン変換サービスを利用して変換 Markdown Tables generator - TablesGenerator.com
7.ブログにペースト
ドキュメント整形と翻訳結果
キーワード | 和訳 | 説明 |
---|---|---|
prepublish | パッケージがパックされて公開される前に実行します。ローカルのnpm installにも引数はありません。 (下記参照) | Run BEFORE the package is packed and published, as well as on local npm install without any arguments. (See below) |
prepare | パッケージがパッキングされパブリッシュされる前と、引数なしでローカルのnpmにインストールされる(下記参照)の両方で実行します。これはprepublishの後に実行されますが、prepublishOnlyの前に実行されます。 | Run both BEFORE the package is packed and published, and on local npm install without any arguments (See below). This is run AFTER prepublish, but BEFORE prepublishOnly. |
prepublishOnly | パッケージが準備され、パックされる前に実行します.npmでのみ公開します。 (下記参照。) | Run BEFORE the package is prepared and packed, ONLY on npm publish. (See below.) |
prepack | tarballがパックされる前に実行します(npm pack、npm publish、およびgit依存関係のインストール時) | run BEFORE a tarball is packed (on npm pack, npm publish, and when installing git dependencies) |
postpack | tarballが生成されて最終目的地に移動した後に実行します。 | Run AFTER the tarball has been generated and moved to its final destination. |
publish, postpublish | パッケージが公開された後に実行します。 | Run AFTER the package is published. |
preinstall | パッケージがインストールされる前に実行します | Run BEFORE the package is installed |
install, postinstall | パッケージがインストールされた後に実行します。 | Run AFTER the package is installed. |
preuninstall, uninstall | パッケージがアンインストールされる前に実行します。 | Run BEFORE the package is uninstalled. |
postuninstall | パッケージがアンインストールされた後に実行します。 | Run AFTER the package is uninstalled. |
preversion | パッケージのバージョンをバンプする前に実行します。 | Run BEFORE bumping the package version. |
version | パッケージバージョンをバンプしてから、コミットする前に実行します。 | Run AFTER bumping the package version, but BEFORE commit. |
postversion | AFTERでパッケージ・バージョンをバンプし、コミット後に実行します。 | Run AFTER bumping the package version, and AFTER commit. |
pretest, test, posttest | npm testコマンドで実行します。 | Run by the npm test command. |
prestop, stop, poststop | npm stopコマンドで実行します。 | Run by the npm stop command. |
prestart, start, poststart | npm startコマンドで実行します。 | Run by the npm start command. |
prerestart, restart, postrestart | npm restartコマンドで実行します。注意 再起動スクリプトが提供されていない場合、npm restartはstopスクリプトとstartスクリプトを実行します。 | Run by the npm restart command. Note npm restart will run the stop and start scripts if no restart script is provided. |
preshrinkwrap, shrinkwrap, postshrinkwrap | npm shrinkwrapコマンドで実行します。 | Run by the npm shrinkwrap command. |