在Vue项目里正确地引用jQuery插件

正文

1.安装jquery依赖

npm install jquery --save

2.修改两处配置文件

在Vue项目里正确地引用jQuery插件_第1张图片

在Vue项目里正确地引用jQuery插件_第2张图片

在Vue项目里正确地引用jQuery插件_第3张图片

module.exports = {
   // 其他代码...
   resolve: {
      extensions: ['', '.js', '.vue'],
      fallback: [path.join(__dirname, '../node_modules')],
      alias: {
          'src': path.resolve(__dirname, '../src'),
          'assets': path.resolve(__dirname, '../src/assets'),
          'components': path.resolve(__dirname, '../src/components'),

          // webpack 使用 jQuery,如果是自行下载的
          // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
          // 如果使用NPM安装的jQuery
          'jquery': 'jquery' 
      }
   },

   // 增加一个plugins
   plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],

   // 其他代码...
}

3.直接在页面引用

在Vue项目里正确地引用jQuery插件_第4张图片

参考文献

  1. vue-cli怎么引入jQuery
    http://618cj.com/2016/08/24/vue-cli%E6%80%8E%E4%B9%88%E5%BC%95%E5%85%A5jquery/

你可能感兴趣的:(Vue)