vue中引入jquery,vue中引入css文件

vue npm命令安装jquery

1：npm install jquery

我们拥有十载网页设计和网站建设经验，从网站策划到网站制作，我们的网页设计师为您提供的解决方案。为企业提供做网站、网站制作、微信开发、微信小程序、成都做手机网站、H5技术、等业务。无论您有什么样的网站设计或者设计方案要求，我们都将富于创造性的提供专业设计服务并满足您的需求。

2：在build文件夹下的webpack.base.conf.js进行配置

（1）const webpack = require("webpack")

（2）在module.exports里面加入

   plugins: [

new webpack.optimize.CommonsChunkPlugin('common.js'),

             new webpack.ProvidePlugin({

jQuery:"jquery",

$:"jquery"

})

],

如图

3：在需要用到jquery的页面引入

import $ from 'jquery';

vue 全局引入 jquery

第一步、在项目中npm安装JQ

npm install jquery --save

第二步、检查是否安装成功

           在package.json中的dependencies查看是否含有jquery

第三步、配置JQ

           在vue.config.js中顶部写入 const webpack = require('webpack')

           写入后在configureWebpack中加入

第四步、重启项目，引入成功

vue如何引入js文件

1、vue-cli webpack全局引入jquery

(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。)

(2)在webpack.base.conf.js里加入

1

var webpack = require("webpack")

(3)在module.exports的最后加入

1234567

plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })]

(4) 在main.js 引入就ok了 (测试这一步不用也可以)

1

import $ from 'jquery'

(5)然后 npm run dev 就可以在页面中直接用$ 了.

如何在vue中引入第三方jquery，swiper等库

一 .引入swiper(全局，局部)

方法一：全局引入，也是最暴力的，但是也是有好处坏处（同时加载，但是不能保证同时下载）

link href="" rel="stylesheet"script src=""/script12

组件中可以直接使用的swiper了

_initSwiper() {        const container = this.$refs.swiper;        const config = {

   effect: 'coverflow',

   slidesPerView: 'auto',

   centeredSlides: true,

   initialSlide: this.activeIndex,

   loop: true,

   autoplay: 1000,

   speed: 1000,

   coverflow: {

     rotate: 0,

     stretch: -30,

     depth: 100,

     modifier: 0.7,

     slideShadows: false,

   },

 };    this.mySwiper = new Swiper(container, config);

}1234567891011121314151617181920

2.方法二：main.js 中

import '../node_modules/swiper/dist/css/swiper.min.css';import 'swiper';12

执行上面的_initSwiper()的方法 即可

3.方法三：局部的引入的，有时只想的单个组件中使用某一个的库，方法如下

section ref="swiper" class="swiper-container"

div class="swiper-wrapper"

div class="demo swiper-slide" v-for="item in colorList" :style="`backgroundColor:${item}`"/div

/div/sectionscript

let swiperAsync = import('swiper') //引入的swiper.js（node_modules）的方法

export default {

data(){      return {

 colorList: ['red', 'yellow', 'gray', 'pink']

}

},

methods: {

async _initSwiper() {        let Swiper = await swiperAsync; //异步加载的

 const container = this.$refs.swiper; //ref='swiper'

 const config = {  //swiper的参数配置

   effect: 'coverflow',

   slidesPerView: 'auto',

   centeredSlides: true,

   initialSlide: this.activeIndex,

   loop: true,

   autoplay: 1000,

   speed: 1000,

   coverflow: {

     rotate: 0,

     stretch: -30,

     depth: 100,

     modifier: 0.7,

     slideShadows: false,

   },

 };        this.mySwiper = new Swiper(container, config);

},

},

mounted(){      this._initSwiper();

}

}/scriptstyle lang="scss" scoped

/*@import '../assets/styles/swiper.min.css'; !*静态资源的文件*!*/

@import '../../node_modules/swiper/dist/css/swiper.min.css';/style12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

二 引入的jquery的方法

全局的方法

script src=""/script1

组件中可以直接使用的 ‘$’的方法

局部的方法：

npm install jquery -D1

需要使用的组件中引入

import $ from 'jquery'1