何もわからない状態からのスタート
vue.jsってなんぞ
要するにいい感じになるライブラリ。とりあえずjQueryっぽいやつだと思っておけばいい。
ライブラリを読ませておいて組み込んでいく。jQueryと違ってjs的な記述になるんだけど、それでもvue.jsなりの書式はあるのでその辺を理解して触る必要がある。jQueryに手を出してjsをわかったつもりになってる人間には覚えることとか理解することが多いので結構たいへん。
IE非対応（極論）
vue.jsのバージョンによりIE非対応（2系だとIE8以下NG）であったり、記述を頑張らないとIEでちゃんと動かなかったり、そういうのがある。
後数日でIEのサポートが終了する。とても待ち遠しいんだけど、多分サポート終わっても継続して使う人はいる。レギュレーションに沿えば度外視していいんだけど、世間的にはどうなんだろう。とはいえ既にvue.jsは流行ってるわけで、強行突破してもいいんじゃないかと思う。だけど、クライアント案件だとここのところの説明をするのめんどくさいなーって。どうしてるんでしょうね。
jsは末尾で読ませる
vue.jsのライブラリは<head>で読み込んでいいんだけど、各種組み上げた内容はベタ打ちだろうが外部ファイルだろうが対応するhtml上のタグより後に記述する必要がある。
jQueryだと全部<head>にぶち込めるので、それで慣れちゃってると躓く。
<div id="test">
{{test01}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
const vm = new Vue ({
el: '#test',
data: {
test01: 'あああああ'
}
})
</script>参考
重ね重ねだけどjQueryで慣れきってると応用があんまり効かないので、無理せずに初心者向けの内容を読んで勉強するのがいい。その点、この記事はとても良かった。
dataを増やす
連想配列のアレで増やしていける。
<div id="test">
{{test01}}
{{test02}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
const vm = new Vue ({
el: '#test',
data: {
test01: 'あああああ',
test02: 'いいいいい'
}
})
</script>const単位で分ける
const以外の書き方もあるのでこれに限らないんだけど。constで複数作り込む場合はこんな感じで切り分けてやっていく。
こんな感じ。
<div id="testA">
{{test01}}
</div>
<div id="testB">
{{test01}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
const vm = new Vue ({
el: '#testA',
data: {
test01: 'あああああ'
}
})
const vm2 = new Vue ({
el: '#testB',
data: {
test01: 'いいいい'
}
})
</script>elの指定先を替えてるのでdataのkeyが被ってても問題ない。
出力内容を色々いじりたいならcomputed
「関数の戻り値」を使う場合はこうなる。
<div id="test">
{{testDate}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: '#test',
computed: {
testDate: function(){
return new Date();
}
}
})
</script>当然出力内容には手を入れられる。
testDate: function(){
return new Date().toISOString().split("T")[0].replaceAll("-", "/");
}所詮はjsであるということ
jsで処理したものをhtml上に表示してるだけなので、反映されるまでは元のタグが表示される。
クリックとかで発火させるならいいんだけど、ページ読み込み時の動作を仕込むのはやっぱりしんどい。cssとかで読み込み時にフェードインを仕込むとかして過程を視覚的に排除するのがいいかも。
body {
animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}HTMLへの記述機会が多い
ここを見ればイメージが付くと思う。
js、jQueryでいうdata属性的なものがvue.jsだと色々ある。良くも悪くもjsの記述だけで完結しないんで覚えることがいっぱい。うん、jQueryは行き当たりばったりでなんとかなるけど、こっちはちゃんとお勉強しておかないとまずい。
「ディレクティブ」
htmlタグに追加するvue.js独自の素敵なアレ。
独自のアレなのでどういうのがあるか知って覚える必要がある。
ajaxが強み？
axiosやらなんやらがある。ページ遷移をせずに情報のやり取りができるのでなんか素敵な感じのサービスを組みたいってときに活躍しまくれる感じ。普段の制作ではyubinbango.jsとか既存のものを導入するだけなので、自分としてはあんまり関係ない話。だけど、なんか良さそうですね。
プロジェクト単位で開発ができる
git的なアレ。開発に必要な環境を揃えて組み上げて、WEBサーバーにアップできる形に書き出すとかそんなやつ。
コンソールの操作はあまり好きじゃないのでアレだけど、「やってる感」は出るよね。
まあでも一般的なWEBサイトの構築には要らないかなと思う。ポータルサイトとかの大掛かりななんやかんやを作るときに活躍する感じか。ローカル環境で組んで完成したらサーバーにアップするみたいな。まあでも公開非公開の面で考えたらwpでカバーできるよねってことも。やってることはwpにプラグインをぶち込んでるのと大差ないというか。とはいえ優劣じゃなくて使い分けの話だと思うし、あとは好き好きとか長短とかのあれで開発速度も変わるし、選んでやっていこうねって感じですかね。
HTML要素を自作できる
自作と言い切ると語弊があるけど。独自の要素を作って、それを指定して操作できる。
<div id="test">
<test-component/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
Vue.component('test-component',{
template: '<p>あああああ！</p>'
})
new Vue({
el: '#test'
})
</script>独自要素は以下の書き方でもOK。というかまあ、用途に応じてって感じ。
<test-component></test-component>名称は好きに付けられるし既存に被ることはないだろうけど、ハイフンを使ったりして確実なユニークに持っていくのが無難。
出力するとこんな感じになる。
<div id="test">
<p>あああああ！</p>
</div>要するに置換。wpでいうショートコードみたいな。
この方法だとjsが反映する前に表示されるものは何もないので、ページ読み込み時に自動挿入するタイプを仕込みたいならオススメか。
検証で見ると反映後が表示されて、ソースを見ると反映前の独自要素が表示される。この程度で何だって話でもあるけど、ちょっとした秘匿テクニックとして使えるかもしれない。
まあそんな感じで、いい感じに組み上げたものにElementというものがある。
詳しくはこの記事とか。
しっかり理解できるまでは環境準備もUIで操作したほうがいいと思うとだけ。
プロジェクト管理ができる
Vue.jsでプロジェクトを作ってWEBサイトを構築、そのままだとブラウザで閲覧できないので動く形に書き出してWEBサーバーにアップロード、って段取りでやっていくことができる。
それぞれビルド、デプロイ、リリースっていうのが一般的みたい。
旧バージョンに戻すことをロールバック。
プロジェクト作成方法
触ったほうがイメージが付きやすい。分かりやすい記事があったので、それに沿ってやっていくのがいい。
「vue ～」がエラーになる場合
powershellで勧めていくと「vue create my-project」で以下のエラーが出た。
vue : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\***\AppData\Roaming\npm\vue.ps1 を読
み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を
参照してください。
発生場所 行:1 文字:1
+ vue create my-project
+ ~~~
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccesspowershellのセキュリティに引っかかって拒否ってるからで、緩和すれば解決する。
Set-ExecutionPolicy RemoteSigned -Scope Process
powershellを起動するたびにエラーになるので覚えておいた方がいい。
vue create my-project
プロジェクト作成にあたってY/Nとか選択とかあるけどYで通せばいい。
npm run serve
ローカルに鯖立てして「http://localhost:8080/」で閲覧ができる。当然ながらソースコードを表示させてるんで、編集するなら一旦停止させる必要がある。停止したいときは「Ctrl+C」、終了確認のメッセージが出るので「Y」を入れてEnter。
WEBサーバーにVue関連が入ってればこれをそのまま持っていけば表示されるんだろうけどそういうわけにもいかないので、ビルド・デプロイをやっていく必要がある。
npm run build
実行して生成される「./dist」の中身は通常のwebサイトと同じ構成なので、これをWEBサーバーにアップすれば表示される。されるんだけど、各ファイルへのリンクが「src=”/」みたいになってるのでドメイン直下じゃないとリンクが死ぬ。「src=”./」に置換して相対パスにしておくのが無難。これはお試しだからいいけど、本番環境だといちいち置換するのは手間を通り越してリスクなので調整が必要なら設定でそうなるようにしとくのがいい。
プロジェクトの削除
削除する場合はプロジェクトのディレクトリを削除するのが手っ取り早い。npmとかで色々インストールしたものはこのディレクトリに入ってるだけでwindowsのProgramfilesとかとは無関係。アンインストーラーを使ってどうのこうのってことにはならない。
Vue Element Admin
活用はすっ飛ばしてとりあえずブラウザで見れるまで持っていく。
cloneでもDLでもいいからGithubから引っ張ってくる。
DLした場合は「vue-element-admin-master.zip」を解凍して、中身を作業用ディレクトリに入れる。
コンソールを起動して該当ディレクトリに移動
cd ディレクトリパスインストールする。結構待つ。
npm install起動する。地味に待つ。
npm run devブラウザが勝手に立ち上がる。IDPWはもともと入ってるのでそのままログイン。
Vue Element Adminの日本語化
端的に言って無理。readmeに書いてあるけど、現行バージョンではi18nに対応してない。なので英語と中国語が入り混じったものを使うことになる。どうしても日本語にしたければ旧版を使う。
インストール方法は同じ、自動で日本語表示になる。カスタマイズ前提で考えたら日本語で書いてるから何なんですかっていう気もする。
Element ui部分は現行版でも日本語化できる。日本語ファイルが同梱されてるので呼び出し部分を書き換えたらいい。
//import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
import jaLang from 'element-ui/lib/locale/lang/ja'
...
Vue.use(Element, {
size: Cookies.get('size') || 'medium', // set element-ui default size
// locale: enLang // 如果使用中文，无需设置，请删除
locale: jaLang
})だけどElement uiの領域はそんなにないので、変更した実感はほぼない。
コメント