sai*_*uni 3 html javascript vue.js
我有login.vue一个文件，我想添加样式，我想要包含js和css文件。我不知道如何在login.vue文件中执行操作。
下面是html文件
<!DOCTYPE html>\n<html lang="en-US">\n <head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">\n <title>Teledirect Group › Log In</title>\n <link href="css/icons.css" rel="stylesheet">\n <link rel="icon" href="img/ico/tlogofvicon.png" type="image/png">\n <link rel="stylesheet" href="css/app.css">\n <link rel="stylesheet" id="dashicons-css" href="css/dashicons.min.css" type="text/css" media="all">\n <link rel=\'stylesheet\' id=\'login-css\' href=\'css/login.min.css\' type=\'text/css\' media=\'all\' /> \n <style>\n .body_css{ \n background: #fefefe none repeat scroll 0 0;\n color: #0a0a0a;\n font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;\n font-weight: normal;\n line-height: 1.5;\n margin: 0;\n padding: 0;\n }\n </style>\n </head> \n <body class="body_css">\n <div class="main">\n <div id="particles-js" style="position: relative">\n <img src="img/logo-white.svg" alt="" class="logo" style="top: -51px;">\n <div style="text-align: center;\n color: #fff;\n position: absolute;\n top: 44%;\n margin-top: 50px;\n width: 100%;\n font-size: 16px;\n font-weight: bold; ">\n Expense Claim System\n </div>\n </div>\n\n <div class="row login-cont">\n <div class="content form op2">\n <input type="hidden" name="reset_email" id="reset_email" value="<?php echo $remail;?>" />\n <input type="hidden" name="ccode" id="ccode" value="<?php echo $ccode;?>" /> \n <div id="loginfrm">\n <form name="login-form" id="login-form" method="post"> \n <span class="error-msg" style="display:none">Please enter your email | Please enter your password</span>\n <p class="userlogin1">\n <label for="user_login">\n <input type="text" name="uname" id="uname" class="input" value="<?php if(isset($_COOKIE["member_login"])) { echo $_COOKIE["member_login"]; } ?>" size="20" placeholder="Username" /></label>\n </p>\n <p class="passwrd1">\n <label for="user_pass" >\n <input type="password" name="pwd" id="pwd" class="input" value="" size="20" placeholder="Password" /></label> \n </p>\n <p class="forgetmenot1"> \n <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" value="forever" /> Remember Me</label></p>\n <p class="submit1">\n <input type="hidden" id="action" name="action" value="login" >\n <input type="submit" name="wp-submit" id="real_submit" class="btn" value="Login" />\n <input type="hidden" name="redirect_to" value="" />\n <input type="hidden" name="testcookie" value="1" />\n <span id="response_submit" style="display:none">\n <a href="" class="btn btn-default pull-right">Checking... <img width="25" src="img/loading.gif" /></a>\n </span>\n </p>\n <p>\n <a href="#" title="Password Lost and Found" class="frgt-password" style="cursor:pointer">Forgot password?</a>\n </p>\n </form>\n </div> \n <div class="panel-footer gray-lighter-bg bt" id="response_note" style="display:none;">\n </div>\n <div id="forgetfrm" style="display:none"> \n <!-- forget password -->\n <form name="lostpasswordform" id="lostpasswordform" method="post">\n <span class="error-msg" style="display:none">Please enter your email or username</span>\n <p>\n <label for="user_login">\n <input type="text" name="user_login" id="user_login" class="input" value="" size="20" placeholder="Email or Username"/>\n </label> \n </p> \n <input type="hidden" name="redirect_to" value="" />\n <p class="submit" style="width:1000px;text-align:center;"> \n <input type="submit" name="fp_submit" id="fp_submit" value="Get New Password" /> \n </p> \n </form> \n <p id="nav"><a href="" class="login-rvt">Log in</a></p>\n <!-- End of forget password --> \n </div>\n\n <div id="resetpwd" style="display:none"> \n <form name="fresetpassform" id="fresetpassform" action="#" method="post" autocomplete="off"> \n\n <span class="error-msg" style="display:none" >Please enter your new password</span>\n\n <p>\n <label for="pass1" id="confm_pass1">\n <input type="password" name="fpass1" id="fpass1" class="input" size="20" value="" autocomplete="off" placeholder="New Password" /></label>\n </p>\n <p>\n <label for="pass2" id="confm_pass">\n <input type="password" name="fpass2" id="fpass2" class="input" size="20" value="" autocomplete="off" placeholder="Confirm new password" /></label>\n </p>\n <p class="submit" style="width:1000px;text-align:center;">\n <input type="submit" name="fwp-submit" id="fwp-submit" value="Reset Password" /></p> \n </form> \n </div> \n <div class="clear"></div>\n <footer>\n <p class="account-copyright"><span>Copyright \xc2\xa9 <?php echo date("Y"); ?> </span><span>Teledirectgroup</span>. <span>All rights reserved.</span></p>\n </footer>\n </div>\n\n <!-- Important javascript libs(put in all pages) -->\n <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>\n <script>\n window.jQuery || document.write(\'<script src="{site_url}js/libs/jquery-2.1.1.min.js">\\x3C/script>\')\n </script>\n <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>\n <script>\n window.jQuery || document.write(\'<script src="js/libs/jquery-ui-1.10.4.min.js">\\x3C/script>\')\n </script>\n <!-- Bootstrap plugins -->\n <script src="js/bootstrap/bootstrap.js"></script>\n <!-- Form plugins -->\n <script src="plugins/jquery.validate.js"></script>\n\n <!-- Top particles background -->\n <script src="js/pages/particles.js"></script>\n <script src="js/pages/app.js"></script>\n <script src="js/pages/login.js"></script>\n\n </body>\n</html>\n\n\n\nand below is login.vue file:\n\n<template>\n\n <div class="card_data align-items-center">\n\n <b-card style="max-width: 25rem;" class="mb-2 shadow p-3 mb-5 bg-white rounded">\n <b-alert variant="danger" dismissible v-model="showDismissibleAlert">\n {{ alertMessage }}\n </b-alert>\n <h4 style="text-align: center">Login Panel</h4>\n <hr>\n <b-form @submit="onSubmit">\n <b-form-group id="username" label="Username:" label-for="username" class="font-weight-bold">\n <b-form-input id="username" type="text" v-model="form.username" required placeholder="Enter email or merchant id" />\n </b-form-group>\n\n <b-form-group id="password" label="Password:" label-for="password" class="font-weight-bold">\n <b-form-input id="password" type="password" v-model="form.password" required placeholder="Enter password" />\n </b-form-group>\n <b-row class="mt-4">\n <b-col class="text-center">\n <b-button type="submit" variant="primary" size="lg" class="text-center">Submit</b-button>\n </b-col>\n </b-row>\n </b-form>\n </b-card>\n\n </div>\n\n</template>\n\n<style>\n .card_data {\n\n background: #fefefe none repeat scroll 0 0;\n color: #0a0a0a;\n font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;\n font-weight: normal;\n line-height: 1.5;\n margin: 0;\n padding: 0;\n\n }\n\n\n</style>\n\n<script>\n export default {\n name: \'LoginPage\',\n data() {\n return {\n form: {\n username: \'\',\n password: \'\'\n },\n show: true,\n alertMessage: \'Wrong Credentials\',\n showDismissibleAlert: false,\n baseUrl: \'\',\n }\n },\n methods: {\n onSubmit(evt) {\n let loader = this.$loading.show({\n container: this.fullPage ? null : this.$refs.file,\n });\n\n this.showDismissibleAlert = false\n evt.preventDefault();\n\n var bodyFormData = new FormData();\n bodyFormData.set(\'email\', this.form.username);\n bodyFormData.set(\'password\', this.form.password);\n this.axios({\n method: \'post\',\n url: this.baseUrl + \'portal/login\',\n data: bodyFormData\n })\n .then((response) => {\n loader.hide();\n if (response.data.success == true) {\n this.showDismissibleAlert = false;\n this.$store.commit(\'setLogin\', true );\n this.$toast.open({\n message: \'Login was success\',\n type: \'success\'\n });\n // console.log(this.$store.getters.getLogin);\n this.$router.push(\'/\');\n\n } else {\n this.$toast.open({\n message: \'Invalid Credentials\',\n type: \'error\'\n });\n }\n })\n .catch(function(response) {\n loader.hide();\n });\n },\n\n onReset(evt) {\n evt.preventDefault()\n this.form.username = \'\';\n this.form.password = \'\';\n this.show = false;\n this.$nextTick(() => {\n this.show = true;\n })\n }\n },\n mounted() {\n this.baseUrl = this.$store.getters.getUrl;\n },\n }\n\n</script>\n我有一个login.vue文件想要添加样式，并且想要包含js和css文件。\n我不知道如何在login.vue文件中执行操作。
您可以将其导入到样式标签中，如下所示：
<style>
@import './css/app.css';
</style>
至于js文件，只需将其导入导出默认的顶部，如下所示：
import myJsFile from "./js/myJsFile"
export default {
...
}
| 归档时间： |
|
| 查看次数： |
11978 次 |
| 最近记录： |