Vue-CLI3.0版本如何引入jQuery和bootstrap

Vue-CLI3.0版本引入jQuery和bootstrap

Vue-CLI3.0版本引入jQuery和bootstrap

随着Vue版本的更迭，目前主流版本已经到了3.0，目前3.0版本的Vue脚手架采用了更轻便的结构，项目的目录方面和2.x版本的脚手架也有很大的不同，其实现在因为有了Vue，来极简化DOM操作后，我们已经很少用到jQuery了，但是奈何有一些项目要求，尤其是在重构一些老的项目上，可能仍然会需要引用到jQuery和bootstrap，于是在网上搜索了一些方法，发现都是一些2.x版本的，先说下2.x的脚手架全局引入jquery的方法吧。

1. npm i jQuery --save //用npm下载jq依赖
2. 找到build文件夹下的webpack.base.conf.js 加入var webpack=require(‘webpack’);
3. 在module.exports加入

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'jquery': path.resolve(__dirname,'../node_modules/jquery/src/jquery')
    }
  }

4. 然后在main.js中加入import $ form ‘jquery’,此时完成jquery的引入

关于2.x版本的bootstrap.css引入

同样也需要修改webpack.base.conf.js文件

 resolve: {
   extensions: ['.js', '.vue', '.json'],
   alias: {
     '@': resolve('src'),
     'assets': path.resolve(__dirname, '../src/assets'),
     'jquery': path.resolve(__dirname,'../node_modules/jquery/src/jquery'),
     'bootstrap':resolve('src/assets/bootstrap')
   }
 }

然后回到main.js文件中引入

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

以上就是2.x版本Vue引入jQuery和bootstrap的方法，接下来说下关于3.0版本的方法

3.xx版本Vue是如何引入jQuery和bootstrap？

我们首先简单的介绍了下3.0以下版本Vue脚手架全局引入jQuery和bootstrap和方法，那么接下来说下3.0版本的引入方法,首先我们先看看目录结构：

接下来再来个2.xx版本的做为对比：

现在大家对比一下两个版本的目录结构，是不是3.0的明显简洁轻便了许多？

也找不到2.xx版本所谓的webpack.base.conf.js目录了
那么我们要如何配置文件，比如修改启动命令？或者引入jQuery之类的文件呢？

1. 首先，我们先创建一个文件 vue.config.js，
   
   这个文件是和package.json平级的文件，一定是以js结尾的，之后的配置，就可以写在这里

2. 在 vue.config.js 文件写入以下内容：

/*
*Vue-CLI项目的核心配置文件
*/
const webpack = require("webpack");

module.exports = {
 configureWebpack: {
   plugins: [
     new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",
       "window.jQuery": "jquery",
       Popper: ["popper.js", "default"]
     })
   ]
 }
};

这样，我们就算完成了jQuery的配置信息

3. 现在我们回到 main.js ，引入jQuery文件：

import $ from "jquery";

new Vue({
router,
store,
$,
render: h => h(App)
}).$mount("#app");

这样，我们就完成了jQuery的全局引入了，之后就可以直接用了

接下来引入bootstrap.css

还是在main.js 文件中引入：

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.min.js";

搞定，是不是很简单？

更多精彩内容，欢迎关注我的博客 https://blog.youkuaiyun.com/yehuo2003