monteecristoo’s blog

https://twitter.com/irakaarozo

Laravel-Mix issue: vue-loader のバージョンをアップグレードしたら vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 等、大量のエラーメッセージ

laravel-mix@2.1.11

vue-loader@15.3.0

 

vue-loader を @14.2.2 から @15.3.0 にアップでしたらエラーが発生

 

solution: 

webpack.mix.js にプラグインを適用

let mix = require('laravel-mix');

const VueLoaderPlugin = require('vue-loader/lib/plugin')

 

mix.webpackConfig({
  plugins: [
    new VueLoaderPlugin()

  ]

});

参照:

vue-loader.vuejs.org

 

また、vue-loader を @14.2.2 から @15.3.0 にアップデートしたら yarn run watch 時の下記のエラーメッセージが発生しなくなった。

No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.

yarn の全てのコマンドをした時のエラーメッセージ

yarn uses deprecated new Buffer() constructor and causes deprecation warnings when run with NODE_PENDING_DEPRECATION=1.

上記も発生しなくなった。

 

cloud9 で Nginx を使う

updated: 2018/8/4

 

cloud9 では初めから Nginx がインストールされている。

 

初期設定ではポートが 80 になっている。cloud9 で使用できるポートは 8080, 8081, 8082 なので 設定を変える。

docs.c9.io

@/etc/nginx/sites-available

sudo nano default

>>> 

server {
listen 8081 default_server;
listen [::]:8081 default_server ipv6only=on;

root /usr/share/nginx/html;
index index.html index.htm;

 

設定を変えたら

sudo nginx

 >>> ポート8081 でサーバーが立ち上がる。

ポートを指定しないと No application running になるが

先ほど設定した8081をポート指定して

YOUR_CLOUD9_URL:8081 にアクセスすると Welcome to nginx! が表示されて設定完了。

 

conf ファイルにエラーがあるとnginx コマンドをしてもエラーメッセージが出て正常動作しないのでエラー取りが必要。

 

 

Biglobe sim ドコモ回線 定期回線速度測定

5時30分 @千葉県千葉市
f:id:monteecristoo:20180731054020p:plain

エンタメフリーオプション
YouTube 480p → たまに止まるけど見れる程度

12時頃
f:id:monteecristoo:20180731114938j:plain
エンタメフリーオプション
YouTube 480p → たまに止まるけど見れる程度

12時30分
f:id:monteecristoo:20180731233439j:plain
YouTube 240p → 見れる程度

19時
f:id:monteecristoo:20180731232833j:plain

23時30分
f:id:monteecristoo:20180731233348j:plain

github と cloud9 の連携 fork 編

まず github 上で fork したいレポジトリを fork

次に cloud9 で新規ワークスペースを作成。この時 git clone の clone 元はオリジナルではなく fork した自分のレポジトリにする。(そうしないと cloud9 から push 出来ない。)

github 上で fork し、git clone で作ったワークスペースはすでに github と紐づいているのでそのままgit commit 後、git push origin master で push 出来る。

toto random generator

resultタブを開くと0~2の数字がランダムに13個出力されます。 もう一度出力したい場合は他のタブを開いた後、resultタブを開いてください。 

 

楽天toto

 

VueJS 子コンポーネントに値をパスするときの謎の挙動

responseは[{prop1: {}, prop2: {}},

      {prop1: {}, prop2: {}}]  とする

messages ではこのresponse をすべて格納して modifiedMessages ではprop2を削除して格納したい。

 

@messages.vue 親コンポーネント

<app-messages v-for="message in messages"

  m=message

  key=message.id >

 

mounted() {
  axios.get('getMessages').then(response => {

    this.messages = response.data;

    const target = response.data;

    for(var i =0; i < target.length; i++) {

      delete target[i].prop2;

    }

    this.modifiedMessages = target;

})

 

@message.vue 子コンポーネント

{{ m.prop2 }} エラー

 

>>> this.messages, this.modifiedMessages ともにprop2が消滅している。

 

mounted() {
  axios.get('getMessages').then(response => {

    this.messages = response.data;

    return response.data;

}).then(response => {

  const target = response;

  for(var i =0; i < target.length; i++) {

    delete target[i].prop2;

  }

  this.modifiedMessages = target;

}); 

 

@message.vue 子コンポーネント

{{ m.prop2 }} OK

 

>>> this.messages, this.modifiedMessages ともにprop2が消滅している。

したがって vue debugger 上では m のprop2 は表示されていない。にもかかわらずちゃんとprop2 が子コンポーネントにパスされ、正常に{{ m.prop2 }} が動作している原因は不明。

 

 

VueJs: method 内で setTimeout を使い setTimeout 内で他に定義した method を呼び出す方法

methods: {

  testFunc() {
     console.log('OK');

  }

},

mounted() {
  setTimeout(function(){

    this.testFunc();  // エラー

  }, 1000);

}  

 

this.testFunc() だとエラー。以下に訂正

mounted() {

  var self = this;
  setTimeout(function(){

    self.testFunc();  // OK

  }, 1000);

}

 

参考:

stackoverflow.com