vue-cli構築プロジェクト導入jqueryとjquery-weui手順の詳細

2724 ワード

vueの概要
   Vue.jsは、ユーザーインタフェースを構築するための漸進的なフレームワークです.他の大型フレームワークとは異なり,Vueは底から上へ層毎に適用できるように設計されている.Vueのコアライブラリは、ビューレイヤのみに注目し、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も容易です.一方、Vueは、近代的なツールチェーンやさまざまなサポートクラスライブラリと組み合わせて使用される場合、複雑な単一ページアプリケーションを駆動することができます.
vue jquery導入
  1.packageでjsonに依存を加える:
dependencies:{
 "jquery" : "^3.2.1"
}

  2.次に、統合端末でコマンド:npm install 3を実行する.Webpack静的モジュールパッケージをbuildディレクトリの下に追加します.base.conf.jsに追加:
var webpack = require("webpack")

  4.buildディレクトリの下にあるwebpack.base.conf.jsのmodule.exportsの最終加入:
plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
 })
]

  5.上記の手順が完了すると、統合端末でコマンド:npm run devを実行し、jqueryが6に導入される.使用方法、srcディレクトリの下のmain.js導入:import$from'jquery'は、グローバルを構成します.単一のvueで導入する場合は、vueページのscriptにimport$from'jquery'を追加できます.
7.jqueryを導入すると、vueで直接jqueryを使用できます
vue jquery-weuiの導入
1.まず同じpackage.jsonファイルに依存を追加します.
dependencies:{
 "jquery-weui" : "^1.2.0"
}

2.統合端末でコマンドを実行します:npm install–save jquery-weui
3.上記の手順が完了すると、vueページのscriptで直接呼び出すことができます.
import weui from 'jquery-weui/dist/js/jquery-weui.min'
import picker from 'jquery-weui/dist/js/city-picker.min'

4.jquery-weuiのメソッドとコンポーネントを直接呼び出すことができます.たとえば、次のようになります.
$.alert("        ");
    toptip:$.toptip('    ', 'success');
       :$("#datetime-picker").datetimePicker();

まとめ
はい、以上はvueがjqueryとjquery-weuiを導入する手順の詳細です.実践は真理性を検証する唯一の基準であり、多くの手で操作すればすぐにvueに上手になります.また、vueが多様な効果を実現する学習サイトをお勧めします.http://618cj.com/category/vueチュートリアル/