使用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 style theme.css 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...