vue-cli3 中引入 JQuery

第一步：

下载 cnpm install jquery --save

第二步：

创建 vue.config.js 文件

模板：

const webpack = require('webpack')
 
module.exports = {
    configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
            $:"jquery",
            jQuery:"jquery",
            "windows.jQuery":"jquery"
        })
    ]
  }
}

第三步：

　main.js 文件引入， import $ from 'jquery'

    Vue.prototype.$jq=$

第四步：　重启项目

第五步：　使用方法

<template><div class="home flex_alignContent" >


<div class="login-content">
    <div class="center tit" id="pttit">xxx平台</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >

        <el-form-item  prop="username">
            <el-input type="text" prefix-icon="el-icon-user-solid" v-model="ruleForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>

        <el-form-item  prop="password"  >
            <el-input type="password" prefix-icon="el-icon-lock" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item >
            <el-button type="primary" @click="submitForm('ruleForm')" class="register" v-bind:loading="loginButton.loading" v-bind:disabled="loginButton.disabled">{{loginButton.text}}</el-button>
        </el-form-item>
    </el-form>

    <div class="space-between ">

      <div><el-link type="primary">还没有账号？</el-link><el-link type="primary">立即注册</el-link></div>

      <div><el-link type="primary">忘记密码</el-link></div>

    </div>

</div>




</div></template>

<script>
import {userLogin, loginLoading} from '../../api/login.js'
import jsCookie from "js-cookie";

export default {
    name: 'Home',
    components: {

    },
    data() {
        return {
            loginButton: {
                loading: false
                ,disabled: false
                ,text: "登录"
            },
            ruleForm: {
                username: '',
                password:''
            },
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 12, message: '账户错误', trigger: 'blur' }
                    // { pattern:/^1[3|5|7|8|9]$/, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password:[
                    {required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 12, message: '密码错误', trigger: 'blur' }
                ]
            }
        }
    },
    mounted(){

    },
    created(){
//使用jq的语法
        console.log('JQ------',this.$jq('#pttit').html()) 
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    loginLoading(this, true);
                    userLogin(this.ruleForm).then(res => {
                        jsCookie.set("token", res.data.tokenHead + res.data.token);
                        this.$message({ 
                            message: '恭喜你，登录成功',
                            type: 'success'
                        });
                        this.$router.push({path:'content'})
                    }).catch(res => {
                        loginLoading(this, false);
                        if (res.status === 200) {
                            this.$message({
                                message: res.data.data.errorDesc,
                                type: 'warning'
                            });
                        } else {
                            this.$message.error("服务器发生异常，请重试");
                        }
                    }).finally(() => {

                    });
                } else {
                    return false;
                }
            });
        },
        register(){
            this.$router.push({path:'content'})
        }
    }
}
</script>

<style scoped>
.home{position: fixed;top:0;left:0;right:0;bottom:0;background: #2d3a4b;}
.tit{font-size:28px;color:#fff;margin-bottom:30px;}
.register{width:100%;}
</style>
<style>
.login-content .el-input__inner{height:50px!important;width:400px!important;}
</style>