vue开发，用npm引入jquery及导入样式

╰半夏微凉° 2022-04-22 14:26 212阅读 0赞

**1安装jquery**

npm install jquery --save-dev

**2.在webpack.config.js 添加内容 (2.x后是：webpack.base.conf.js)**

\+ const webpack = require("webpack");

module.exports = \{  
    entry: './index.js',  
    output: \{  
        path: path.join(\_\_dirname, './dist'),  
        publicPath: '/dist/',  
        filename: 'index.js'  
    \},

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

** 3.在入口文件index.js **

import $ from 'jquery' ;

**4.测试一下是否安装成功，看看能否弹出'123' **

<template>
      <div>
       Hello world！
      </div>
    </template>
    
    <script>
    $(function () {  
        alert(123);  
     }); 
    
    export default {
      
    };
    </script>
    
    <style>
    
    </style>

** 坑一：注意重新跑一遍：npm run dev**

### 导入样式： ###

安装Bootstrap：npm install bootstrap --save

在‘**router / index.js**’里面的添加：import '../../node\_modules/bootstrap/dist/css/bootstrap.min.css'

这样就成功的将css样式导入进来了。

[https://www.cnblogs.com/shengnan-2017/p/8094134.html][https_www.cnblogs.com_shengnan-2017_p_8094134.html]

[https_www.cnblogs.com_shengnan-2017_p_8094134.html]: https://www.cnblogs.com/shengnan-2017/p/8094134.html

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关 css样式引入方式及优缺点

这篇文章主要介绍了css样式引入及优缺点，本文给大家分享三种css的引入方式，通过代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧三种

迷南。/ 2024年03月31日 14:59/ 0 赞/ 113 阅读

相关 ①jQuery 介绍及基础知识（用jQuery修改样式）

jQuery jQuery介绍初识jQuery ※ jQuery的两把利器 jQuery的核心函数 ※ jQuery

灰太狼/ 2023年07月24日 08:13/ 0 赞/ 43 阅读

相关 vue-cli3 中引入 Jquery vue中配置Jquery

1. 安装jquery npm install jquery --save 或在`package.json`中指定版本号，然后运行`npm install`

蔚落/ 2023年05月30日 06:05/ 0 赞/ 36 阅读

相关 vue-cli3.0引入jQuery(转载，直接可以用)

[vue-cli3.0引入jQuery(转载，直接可以用)][vue-cli3.0_jQuery] [vue-cli3.0_jQuery]: https://www.jia

小咪咪/ 2022年12月02日 00:53/ 0 赞/ 79 阅读

相关 vue项目引入bootstrap及jQuery

引入jQuery：在当前项目下cmd，输入 npm install jquery --save-dev 用npm下载jquery依赖、找到build文件夹下的

淩亂°似流年/ 2022年05月16日 02:45/ 0 赞/ 333 阅读

相关 vue开发，用npm引入jquery及导入样式

1安装jquery npm install jquery --save-dev 2.在webpack.config.js 添加内容 (2.x后是：webpack.b

╰半夏微凉°/ 2022年04月22日 14:26/ 0 赞/ 213 阅读

相关 vue-element-admin的jquery引入

引入前提数据介绍："webpack": "4.16.5" 1.npm install jquery --save 2.在webpack.base.conf.js里面的plu

古城微笑少年丶/ 2022年03月14日 12:56/ 0 赞/ 404 阅读

相关 vue中引入jquery

1、在项目中安装jquery。 npm install jquery --save-dev ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

不念不忘少年蓝@/ 2022年01月23日 00:21/ 0 赞/ 511 阅读

相关 Vue组件中引入jQuery

如果想在普通的HTML页面引入jQuer库的话，直接使用`<script src="jQuery.js"></script>`即可。但是如果要在Vue组件中使用jQuery库的

￡神魔★判官ぃ/ 2021年11月04日 17:44/ 0 赞/ 506 阅读

相关 Angular6开发：引入jquery

Angular6开发：引入jquery 方法一：npm安装第一步：进入项目目录，下载jquery npm install--save jquery 在

痛定思痛。/ 2021年09月28日 04:16/ 0 赞/ 494 阅读