Vue+Vux實(shí)現(xiàn)登錄功能

更新時(shí)間：2022年08月26日 11:21:41 作者：奔跑吧鄧鄧子

這篇文章主要介紹了Vue+Vux實(shí)現(xiàn)登錄功能，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、準(zhǔn)備工作

請(qǐng)參照 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

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/views/test'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]
})

3.運(yùn)行

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

在這里插入圖片描述

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

在這里插入圖片描述

到此這篇關(guān)于Vue+Vux實(shí)現(xiàn)登錄的文章就介紹到這了,更多相關(guān)Vue登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)視頻全屏切換功能
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細(xì), 具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
2023-11-11
Vue拖拽排序組件Vue-Slicksort解讀
這篇文章主要介紹了Vue拖拽排序組件Vue-Slicksort，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
VUE對(duì)Storage的過期時(shí)間設(shè)置,及增刪改查方式
這篇文章主要介紹了VUE對(duì)Storage的過期時(shí)間設(shè)置,及增刪改查方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue中如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板詳解
有些業(yè)務(wù)需求需要點(diǎn)擊按鈕復(fù)制鏈接,下面這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
vue限制實(shí)現(xiàn)不登錄無法進(jìn)入其他頁面
本文主要介紹了vue限制實(shí)現(xiàn)不登錄無法進(jìn)入其他頁面,vue限制不登錄,通過url進(jìn)入其他頁面強(qiáng)制回到登錄頁面；已經(jīng)登錄的情況下,不可以再進(jìn)入登錄界面,感興趣的可以了解一下
2024-01-01
關(guān)于Vue.js 2.0的Vuex 2.0 你需要更新的知識(shí)庫
關(guān)于Vue.js 2.0 的 Vuex 2.0你需要更新的知識(shí)庫，感興趣的小伙伴們可以參考一下
2016-11-11
vue3+vite2+mqtt連接遇到的坑及解決
這篇文章主要介紹了vue3+vite2+mqtt連接遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
談?wù)剬?duì)Vue?Router的理解
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了對(duì)Vue?Router的理解,需要的朋友可以參考下
2022-11-11
vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼
這篇文章主要介紹了vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽
這篇文章主要介紹了vue App.vue里的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05