美文网首页
vue-cli3 中引入 JQuery

vue-cli3 中引入 JQuery

作者: 小李不小 | 来源:发表于2021-02-01 15:23 被阅读0次

    第一步:

    下载 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>
    
    

    相关文章

      网友评论

          本文标题:vue-cli3 中引入 JQuery

          本文链接:https://www.haomeiwen.com/subject/begjtltx.html