vueをjquery/bootstrapプロジェクトに統合するにはどうすればよいですか?

以下では、vue を jquery/bootstrap プロジェクトに統合する方法を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

説明、プロジェクト自体は管理バックエンドとして jquery とブートストラップを使用し、一部のログイン インターフェイスはノード サーバー上で実行され、ほとんどのインターフェイスは springmvc を使用して実装されます。ここで、vue を使用して開発し、vue を元のプロジェクトに統合します。元のフレームワークには影響しません。本来のパッケージ化方法は、vue を統合した後、最初に webpack を使用してパッケージ化し、次に fis を使用してパッケージ化します。お互いに影響を与えないでください。

1. 本来jqueryとbootstrapを使用しているため、package.jsonフォルダー以下にデータはありません。 vue を使用する場合は、必要な依存関係をすべて package.json の下に置き、次の依存関係を追加します。

{
 "name": "node",
 "version": "0.0.1",
 "private": true,
 "scripts": {
 "start": "supervisor start.js"
 },
 "dependencies": {
 "babel-core": "^6.0.0",
 "babel-loader": "^6.0.0",
 "babel-preset-es2015": "^6.13.2",
 "cross-env": "^1.0.6",
 "css-loader": "^0.23.1",
 "file-loader": "^0.8.5",
 "style-loader": "^0.13.1",
 "vue": "^2.1.6",
 "vue-hot-reload-api": "^2.1.0",
 "vue-loader": "^9.8.0",
 "vuerify": "^0.4.0",
 "webpack": "beta",
 "webpack-dev-server": "beta"
 },
 "devDependencies": {
 "babel-plugin-component": "^0.9.1"
 }
}

注: jquery を元々使用していたときは、ホット ロードにスーパーバイザーが使用されていました。これらの依存関係は、インストール後にローカルの node_modules ディレクトリに存在します。gitIgnore を追加し、このフォルダーを除外することをお勧めします。前者は、コードを送信するときに git がこれらのライブラリを送信しないようにするためのものであり、後者は、IDE がこれらのファイルのインデックスを作成するためにインデックスを使用しないようにするものであり、非常にスタックしてしまいます。

ここでは除外されているため、除外されていないことが表示されます

.gitignore ファイルが追加されました:

次のステップは、package.json が配置されているディレクトリに移動し、npm install を実行してすべてをインストールすることです。依存関係。

2、新しい webpack.config.js ファイルを作成します (webpack のパッケージ化に使用されます)。ファイルの内容は次のとおりです:

module.exports = {
 entry: './project/ebook-manage/resources/node-ebook-manage/js/console/content/rechargeOrder.js',
 output: {
 filename: './project/ebook-manage/resources/node-ebook-manage/js/console/dist/rechargeOrder-bundle.js'
 },
 module: {
 loaders:[
 {
 test: /\.vue$/,
 loader: 'vue-loader'
 },
 {
 test: /\.js$/,
 loader: 'babel-loader',
 exclude: /node_modules/
 },
 {
 test: /\.css$/,
 loader: 'style-loader!css-loader'
 },
 {
 test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
 loader: 'file-loader'
 },
 {
 test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
 loader: 'file-loader',
 query: {
  name: '[name].[ext]?[hash]'
 }
 }
 ]
 },
 resolve: {
 alias: {
 'vue': 'vue/dist/vue.js'
 }
 },
};

注: 上記は、rechargeOrder.js ファイルを rechargeOrder-bundle にパッケージ化することを意味します。 .js ファイル、vue などのローダーの使用 (具体的な知識については webpack を参照)

3、 元々、jquery は html に js を導入し、現在でもこれを行っています。

以下に示すように

ここで、bundle.jsはソースファイルではなく、webpackによってパッケージ化されたファイルです

4, rechargeOrder.jsファイルを作成し、vueを参照し、コードは次のとおりです:

import Vue from 'vue'
 new Vue({
 el: "#secondFram",
 data: {
 userId:""
 },
 components: {},
 filters: {},
 beforeMount:function () {
 },
 methods: {
 buttonClick1() {
 this.getOrders()
 }
 },
 computed: {

 }
 });

ここで、 SecondFram は html の SecondFram の ID を持つ p です

5, HTML にボタンを書きます826dd94b11c00bb9087d8c6cc3d1818bQuery65281c5ac262bf6d81768915a4a77ac0

6, すべての準備が整いました。必要なのは、webpack のパッケージ化だけです。webpack.config.js ディレクトリで、webpack webpack.config.js コマンドを使用します。パッケージ化後、 rechargeOrder-bundle.js ファイルが生成されます。以前は js ファイルを参照していたのと同じですが、webpack でパッケージ化され、vue で記述された js が webpack で処理されたブラウザーで認識できるようになりました。

7、 元のプロジェクトは fis でパッケージ化されていましたが、現在も fis でパッケージ化されていますが、影響はありません。

上記は私があなたのためにまとめたものです。

関連記事:

要素 ui のダイアログ el-dialog 終了イベントについて (詳細なチュートリアル)

Vue でのコンパイル操作メソッドの使用方法

ダイアログを閉じた後に検証をクリアする方法要素 ui 内

以上がvueをjquery/bootstrapプロジェクトに統合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。