KYO

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

2018年9月7日 Vue.js , , ,

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で先ほどと同じ画面が表示されます!


関連記事

Vue.jsでコンポーネントの基礎を整理します

2018年9月2日

Vue.jsを勉強していますが、ちょっとコンポーネントの部分で躓いたので、整理もかねてメモを残します。今回はコンポーネントを定義して、そっから定義元であるメソッドを呼び出すという処理を行います。引数の受け渡しも同時に整理していきます   まずはこんなjsを用意しました。 const app = new Vue({ el:'#sa...

Vue.jsで、スライドメニューを作る

2018年8月17日

最近Vue.jsを勉強し始めました。 対してjQueryも使いこなせないんですが、Vue.jsってjQueryより使いやすいんじゃね?と思ってしまうほどにハマってしまいました。 というわけで、Vue.jsでサイドメニューを表示させます。   jQueryみたいにクリックした時に、この要素にクラスを付与するみたいなロジックを書かず...