一、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