目錄

• 一、準(zhǔn)備工作
• 二、創(chuàng)建登錄頁
• • 1.main.js 中引入全局 ToastPlugin、LoadingPlugin 插件
  • 2.views 下創(chuàng)建 login\login.vue
  • 3.運(yùn)行

---

一、準(zhǔn)備工作

請參照 Vue前端框架搭建 使用模板創(chuàng)建框架。

二、創(chuàng)建登錄頁

1.main.js 中引入全局 ToastPlugin、LoadingPlugin 插件

import { ToastPlugin, LoadingPlugin } from 'vux'Vue.use(ToastPlugin) Vue.use(LoadingPlugin)

2.views 下創(chuàng)建 login\login.vue

<template><div class="login"><group><x-input title="" name="mobile" placeholder="請輸入手機(jī)號" v-model="mobile" keyboard="number" is-type="china-mobile" required></x-input><x-input title="" type="password" placeholder="請輸入登錄密碼" v-model="password" :min="6" :max="16" required></x-input></group><box gap="10px 25px"><x-button type="primary" @click.native="handleLogin">登錄</x-button></box></div> </template><script>import { XInput, Box, Group, XButton } from 'vux'export default {name: 'login',data() {return {mobile: '', //手機(jī)號password: '' //密碼}},methods: {handleLogin() {if(!this.mobile || !this.password) {this.$vux.toast.text('您有未填項(xiàng)，不能登錄')} else {this.$vux.toast.text('登錄成功')this.$router.push({path:'/test'})}}},created() {window.document.title = '登錄';},components: {XInput,XButton,Group,Box}} </script>

3.運(yùn)行

瀏覽器輸入 http://localhost:8080/#/login：

點(diǎn)擊【登錄】：

總結(jié)

以上是生活随笔為你收集整理的Vue+Vux实现登录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。