webpack+bootstrap+vue

4099 ワード

vue-cli+webpack生成されたプロジェクトでbootstrapメソッドを使用
足場生成プロジェクト実行コマンドwebpackテンプレートでvuestrapというプロジェクト(名前任意)を生成
vue init webpack vue-boot
インストール依存yarn install&&yarn install jquery bootstrap–save
注意:npm上のjqueryのバージョンを表示する場合は、コマンド:npm view jquery versions
build/webpack.dev.conf.jsファイルでは、構成オブジェクト全体の末尾にplugins構成を追加します.
const webpack = require('webpack')

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ]

上の記事では白い海のブログjQueryの配置方法を参考にしていますが、ネット上ではhttps://segmentfault.com/a/1190000006887523#articleHeader3 ===========================================================================js@1.12.9================================================================
インストール依存时に発生したエラーは何の问题が分からないで、npmでインストールすることができなくて、私はyarnインストールに変えて解决しました
$ npm install
npm ERR! Unexpected end of JSON input while parsing near '...bd66185a2b79f2321a930'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-02-05T07_48_17_904Z-debug.log

プロジェクトの実行中に発生した問題–依存をすべて削除して再ダウンロードして解決する方法です.
$ npm run dev

> vue-boot@1.0.0 dev C:\Users\Administrator\Desktop\react\vue-project\vue-boot
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

'webpack-dev-server' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-boot@1.0.0 dev: `webpack-dev-server --inline --progress --config bu                              ild/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-boot@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional log                              ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-02-05T0                              7_41_13_167Z-debug.log