zoukankan      html  css  js  c++  java
  • vue-cli项目中引入第三方插件

    前言

    最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如何引入第三方插件或者库(仅仅只是一部分,如果没有您想要的可以自行百度),那么一起来看看吧!

    本章目标

    • 学会vue-cli项目中引入jQuery

    • 学会vue-cli项目中引入Bootstrap

    vue-cli项目中引入jQuery和Bootstrap

    首先我们需要引入的是jQuey这个库,毕竟作为一名前端开发人员,我们经常使用jQuey中的ajax请求数据,但是学完本篇博客你可以使用另一种方法请求数据,就是下文提到的axios,这个相对于jQuey中的ajax来说是相对好用的。

    (1)添加依赖并安装依赖

    项目根目录下找到package.json 添加

    "bootstrap": "^3.3.6",
    "jquery": "^2.1.4",

    版本可以根据自己的需要修改

    安装命令

    cnpm install
    npm install

    安装完成之后我们去node_modules查看是否安装成功,安装成功之后的结果

     

    (2)导入jQuey和Bootstrap

    在main.js 导入 (注意导入是node_modules下的路径可以点进去查看具体位置)min是压缩后文件建议导入这个

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

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import Vuex from 'vuex'
    import store from './store/index'
    // import router from './router'
    // import router from './router/hello'
    // import  router from './router/test'
    // import  router from './router/common'
    // import router from './router/one'
    import router from './router/two'
    import 'jquery/dist/jquery.min'
    import 'bootstrap/dist/js/bootstrap.min'
    import 'bootstrap/dist/css/bootstrap.min.css'
    Vue.config.productionTip = false
    Vue.use(Vuex)
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: {},
      template: ''
    })

    使用这种方法引入

    (3)使用内置插件ProvidePlugin自动加载模块

    此时jQuery并未依赖成功,将提示错误:

     需在build/webpack.base.conf.js中增加插件配置

    const webpack = require('webpack')

    配置中添加

    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"
      })
    ],

    build下webpack.base.conf.js的完整结果

     'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const vueLoaderConfig = require('./vue-loader.conf')
    const 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'), resolve('node_modules/webpack-dev-server/client')]
          },
          {
            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]')
            }
          }
        ]
      },
      plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "windows.jQuery": "jquery"
        })
      ],
      node: {
        // prevent webpack from injecting useless setImmediate polyfill because Vue
        // source contains it (although only uses it if it's native).
        setImmediate: false,
        // prevent webpack from injecting mocks to Node native modules
        // that does not make sense for the client
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
      }
    }

    (4)使用jQuery与Bootstrap

    Bootstrap资料

    Bootstrap中文网:https://www.bootcss.com/

    菜鸟教程:https://www.runoob.com/bootstrap/bootstrap-tutorial.html

    配置好之后我们就直接使用jQuey和Bootstrap

    自己可以新建一个组件中使用jQuery相关方法和Bootstrap相关资源

    IndexComponent.vue

    <template>
        <div>
          <h1>你好</h1>
          <button @click="changeMsg">改变消息</button>
          <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="/">首页</a></li>
            <li role="presentation"><a href="#/a">组件A</a></li>
            <li role="presentation"><a href="#/b">组件B</a></li>
            <li role="presentation"><a href="#/c">组件C</a></li>
          </ul>
        </div>
    </template>
    
    <script>
        export default {
            name: "IndexComponent",
            data(){
              return{
    
              }
            },
            methods:{
              changeMsg(){
                $('h1').text('我好')
              }
            }
    
        }
    </script>
    
    <style scoped>
    
    </style>

    结果:

  • 相关阅读:
    Linux 学习 step by step (1)
    ubuntu server nginx 安装与配置
    ubuntu server samba服务器配置
    iOS app集成支付宝支付流程及后台php订单签名处理
    mac 连接windows 共享内容
    linux 文件查找,which,whereis,locate,find
    ubuntu server vsftpd 虚拟用户及目录
    ubuntu server 安装 mantis bug tracker 中文配置
    ubuntu server vsftpd 匿名用户上传下载及目录设置
    linux 用户管理,用户权限管理,用户组管理
  • 原文地址:https://www.cnblogs.com/jjgw/p/12076923.html
Copyright © 2011-2022 走看看