Vue.js>vue-cliで作る時にjQueryを導入するまでとビルド後にエラーが起きた時

vue-cliで作る時にjQueryを導入するまでとビルド後にエラーが起きた時

2018年9月7日

vue-cliというすごいものがあると知ったんですが、npmとかいまいちよくわかっていませんでしたので、遠ざかっていました。しかし、Laravelとの連携を考える時に必要な知識になってくるのではないかと思い簡単に入門してみたのでそのまとめです。

プロジェクトを作成する

これでプロジェクトを新規作成できますが、このコマンドを打った後に色々聞かれますが、とりあえずエンターをぶっこみます

これでプロジェクトを動かす準備ができました

こんなログが出るので、そのアドレスにアクセスする。

こんな感じでテンプレートのページが表示されます。

jQueryを導入する

これでjQueryをインストールします
次にmain.jsでインポートしておきます

.eslintrc.jsを編集します

これを追記しました。
これでjQueryが使えるようになった。サーバーを立ち上げっぱなしの場合は、再度立ち上げ直して起きます

App.vueを編集します

こんな感じでしっかりとjQueryが動作していました。

ビルドした後に何も表示されないエラーを解決する

npm run build

コマンドを打つとビルドが始まります。

ビルドするとdistフォルダができる そこにファイルができる。 それはサーバーを立ち上げずともできる(本番リリース用なのかな?)

ここで、 Failed to load resource: net::ERR_FILE_NOT_FOUND こんな感じのファイル読み込みエラーが起きる場合 configフォルダのindex.jsを修正する

2箇所変更するとdist内のindex.htmlで先ほどと同じ画面が表示されます!