第一步:
下载 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>
网友评论