一、vue安裝jquery

前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。

1、新建一個vue工程。

2、在項目文件夾下，使用命令 npm install jquery --save-dev? 引入jquery。

npm install jquery --save-dev? 

3、在build/webpack.base.conf.js中添加如下內容：

var webpack = require('webpack')

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

?添加完成后，文件內容如下：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
var webpack = require("webpack")function resolve (dir) {return path.join(__dirname, '..', dir)
}module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}},module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test')]},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('media/[name].[hash:7].[ext]')}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}]},// 增加一個pluginsplugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery"})],
}

4、在src/main.js文件中 引入jquery

import $ from 'jquery'

5、修改 xxxx .vue , 使用?jquery , 和以前寫 jsp 一樣用法 。

?

二、vue安裝Bootstrap

1、安裝bootstrap，使用命令

npm install bootstrap --save-dev

2、在 package.json 文件中引入 bootstrap 這個模塊

3、在src/main.js文件中 引入jquery

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

?

轉自：https://www.cnblogs.com/hedeyong/p/7864842.html