使用Vue寫乙個登入頁面

上一部落格講到構建了乙個vue專案，現在在那個專案之上實現乙個登入頁面。

因為用到了element-ui元件，所以需要先安裝element-ui元件，進入專案根目錄後

執行

cnpm i element-ui

//自己寫的樣式

import

'./style/theme.css'

import

'./style/characters.css'

// 註冊element-ui

vue.

use(elementui)

/* eslint-disable no-new */

newvue

()theme.css

body 

.outer_label 
.inner_label 
.qxs-icon 

.text-size12px

.text-size14px
.text-size16px
.float-right 
.item-color 

import vue from

'vue'
import router from
'vue-router'
// import helloworld from '@/components/helloworld'
import login from
"@/components/login/login"
vue.
use(router)
export
default
newrouter(]
})

="outer_label"

>
="inner_label login_logo" src=
"../../assets/logo.png"
>
<
/div>
="login_form"
>
"text"
class
="qxs-ic_user qxs-icon" placeholder=
"使用者名稱" v-model=
"username"
>
"text"
class
="qxs-ic_password qxs-icon" placeholder=
"密碼" v-model=
"password"
>
="login_btn" @click.native=
"login" type=
"primary" round :loading=
"isbtnloading"
>登入<
/el-button>
<
/div>
<
/div>
<
/template>
// import from '../../api/api';
export
default},
created()
},computed:},
methods:if(
!this
.password)
// 開始真正的登陸請求}}
3. 根據npm run dev 命令啟動，啟動完成之後會有個鏈結，訪問鏈結就直接可以看到下面頁面：
注：
由於沒有和後端相連，所以點登陸沒有作用，可以利用axio傳送資料報，進行登陸操作。

使用Vue寫乙個登入頁面

為了不浪費大家時間，所以我把這段話放在了開頭。上一部落格講到構建了乙個vue專案，現在在那個專案之上實現乙個登入頁面。因為用到了element ui元件，所以需要先安裝element ui元件，進入專案根目錄後 執行cnpm i element ui構建專案的目錄 自己寫的樣式 import sty...

寫乙個簡單的登入頁面 html

首先 現在html裡的body裡寫 乙個頭部header標籤 雙標籤 然後在header標籤裡寫登入就像這樣 header 使用者登入 header 然後再寫乙個div標籤 div input type text name username placeholder 請輸入賬號 input type ...

乙個登入頁面

登入頁面寫起來很簡單，但寫多了每次都重新寫乙個的話還是覺得很費事的，所以寫了個模板放這裡，以後需要的話直接用這個改。登入 title style login login title line line input line a line span log submit style head body...