vue.js プロジェクトの実践的なヒントのまとめ-jsチュートリアル-php.cn

vue.js プロジェクトの実践的なヒントのまとめ

小云云

リリース： 2017-12-12 15:04:18

オリジナル

2037 人が閲覧しました

Vue.js は、ユーザーインターフェイスを構築するための進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコアライブラリはビューレイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、Vue エコシステムによってサポートされる単一ファイルコンポーネントとライブラリを使用して開発された複雑な単一ページアプリケーションを実行する能力を十分に備えています。この記事では主に vue.js プロジェクトの実践的なヒントをサンプルコードを通して詳しく紹介していますので、皆さんの学習や仕事に役立つことを願っています。

#Vue プロジェクトに Bootstrap を導入する

vue プロジェクトには、必要に応じて Bootstrap が導入されることがありますが、Bootstrap は、npm を使用してインストールすると、一連のエラーが発生する可能性があります

1. jQuery をインストールします。

npm install jquery

ログイン後にコピー

2. Bootstrap をインストールします

npm install bootstrap@3

ログイン後にコピー

上記の 2 つの手順では、最初に package.json 構成ファイルでバージョン番号を指定し、インストールが完了したら npm install を実行することもできます。はい、両方とも正常にインストールされましたが、「Bootstrap の JavaScript には jQuery npm が必要です」というエラーが報告されます。この問題を解決するには、次のように main.js エントリファイルに導入します。

import $ from 'jquery'
window.jQuery = $
require('bootstrap')

ログイン後にコピー

次に、Bootstrap スタイルを使用するには、エントリーファイルに bootstrap.css を導入します。これはElement UIを導入するのと同じ方法です

import 'bootstrap/dist/css/bootstrap.min.css'

ログイン後にコピー

# eslintのコードインスペクションをオフにする

eslintのインスペクションをオフにする方法は、build/webpackのeslint設定のこの部分をコメントアウトすることだと多くの人が言っています。 .base.conf.js ファイル。 Vue-cliのバージョンアップの影響か分かりませんが、実際の動作では動作しません。

正しい方法は、config/index.js ファイル内の dev オブジェクトの useEslint 属性を false に変更することです

# 一部の eslint ルールをオフにします

。実際、eslint コードインスペクションは非常に優れており、個人の js 記述を標準化するだけでなく、チーム内の複数人による共同開発においても非常に重要な役割を果たします。ただし、これらのルールは少し厳格すぎる場合があります。たとえば、未使用の変数を宣言すると「no-unused-vars」エラーが発生します。このルールをオフにしたい場合は、eslintrc.js ファイルを開いて変更します。対応するルールを 0 にします。閉じても構いません

# ポート番号を変更します

ほとんどのプロジェクトはデフォルトでポート 80 をリッスンするため、複数のプロジェクトを同時に実行するには、ポート番号を変更できますconfig/index.js

# 設定ファイルの参照パス alias

プロジェクトファイルが多すぎる場合、「../../../static/data/xx.json」のような参照が頻繁に表示されることがありますこれは書くのが面倒で、エラーが発生しやすいものです (もちろん、コードはコンパイルされますが、ブラウザーがプロンプトを表示できるかどうかは関係ありません)。パスを簡素化するために、build/webpack.base.conf でエイリアスを構成できます。 js

ここでは、resolve メソッドを呼び出してパスを簡素化することが目的です。たとえば、@ を直接使用して src を置き換えたり、レイヤーを探す代わりに「api/xx.js」を直接記述したりできます。 by Layer

# UTC 時間

VueHighcharts コンポーネントを使用する場合、デフォルトでは UTC 時間が使用されるため、時間は常に表示にズレが生じます。たとえば、現時点の時間は 11 月 23 日の 18:07 です。 , 2017 ですが、下の写真では UTC 時間で表示されている時間が 10:07 になっています