從零開始-vue.js（1）登入介面

阿新 • • 發佈：2019-02-06

一、利用Vue cli快速搭建專案

（這裡假設已經安裝好所有webpack工具）

進入工程資料夾（自己建的），在終端輸入：

Vue init webpack toLogin2

其中：toLogin2是專案名，可自定義，終端將自動載入和下載必要的包，然後有一些項需要自己選擇，如下圖：

注意在“Use EsLint to lint your code?”這裡，新手一定要選no，親身經歷，選了EsLint真的很坑，少一個空格多一個空格都會報錯，無法正常執行專案，其他的選項基本預設回車就可以了。

至此，我們會在工程資料夾中看到一個專案名為toLogin2的專案資料夾，也就是我們可以啟動這個專案了！

啟動專案的方法：

基本都是進入專案資料夾→安裝專案依賴→執行專案

具體語法：

cd toLogin2
npm install
npm run dev

執行之後，會看到瀏覽器自動開啟（如果不開啟就手動複製後臺給的網址，一般是localohost:8080)，如圖所示：

開啟之後的頁面：

至此，我們成功建立並運行了一個專案了，之後的專案將全部基於這個基礎的專案進行更改。

二、安裝必要的包

想要打出漂亮的介面，還需要有vue的UI元件庫，因此需要進入該專案資料夾，安裝element-ui元件庫；同時，要想實現登入之間的跳轉邏輯，還需要有axios作為和後臺的互動（類似js中的ajax）。輸入以下命令：

cd toLogin2
npm install axios -save
npm install element-ui -save

這樣，我們就準備好了專案所需的所有工具，開始修改程式碼。

三、修改程式碼設計登入介面

先看專案的目錄：

需要我們做更改的是src裡面的元件，main.js中元件與路由的互動，以及App.vue中的呈現方式，index.js中的路由選擇。

1. APP.vue

專案的預設主元件,也就是專案開啟看到的頁面，需要修改為登入頁面：

（1）去掉預設圖片

（2)

2. 修改main.js：

主要是引進了元件庫：添加了如下三行程式碼：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css

Vue.use(ElementUI)

3. 建立新的元件Login.vue

在components資料夾下新建一個檔案，命名為Login.vue,內容如下：

<template>
<div>
    <h1>{{ msg }}</h1>
</div>
</template>

<script>
export default {
    name: '登入',
    data() {
        return {
            msg: 'welcome login'

        }
        
    }
}</script>

4. 修改router下的index.js

import Vue from 'vue'
import Router from 'vue-router'

//懶載入方式，當路由被訪問的時候才載入對應元件
const Login = resolve => require(['@/components/Login'], resolve)

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '登入',
      component: Login
    }
  ]
})

來看看初步效果，頁面是否被更新：

終端執行報錯：

看描述是：找不到依賴，嘗試下面建議的解決方法，輸入

npm install -save element-ui/lib/theme-default/index.css

發現還是報錯：

複製錯誤資訊“Could not install from "element-ui/lib/theme-default/index.css" as it does not contain a package.json file.”在網上找解決方法：

嘗試著更換樣式檔案目錄，再次執行專案，編譯成功：

開啟介面，很好，已經改成我們的初始Login頁面了~

三、修改Login頁面

按照之前跟一個很厲害的前端博主學習的前端頁面構造初步構建，打算先畫一個基本的框架圖：

好的，接下來我們要按照這個粗糙的手稿開始打頁面啦~

經過修改後的Login.vue如下：

<template>
<!--背景圖-->
<!--login框，表單+tab標籤頁的組合-->

<div class = "loginFrame">
    <el-form ref = "AccountForm" :model = "account"   rules = "rules" label-position = "left" label-width = "0px" class = "demo-ruleForm login-container">
       <!--tab標籤-->
    <el-tabs v-model = "activeName" @tab-click = "handleClick" class = "users">
        <el-tab-pane label = "學生" name = "students">學生</el-tab-pane>
        <el-tab-pane label = "教師" name = "teacher">老師</el-tab-pane>
        <el-tab-pane label = "教務老師" name = "eduTeacher">教務老師</el-tab-pane>
    </el-tabs>

<el-form-item prop = "username">
    <el-input type = "text" v-model = "account_username" auto-complete = "off" placeholder = "請輸入您的賬號"></el-input></el-form-item> 
<el-form-item prop = "password"
    <el-input type = "password" v-model = "account_password" auto-complete = "off" placeholder = "請輸入密碼"></el-input></el-form-item>
<el-checkbox v-model = "checked" checked class = "remember">記住密碼</el-checkbox>
<h3 class = "forgetpwd">忘記密碼</h3>   
<el-form-item style = "width:100%;">
    <el-button type = "primary" style = "width:100%;" >登入</el-button>
</el-form-item>
    </el-form>
</div>
</template>

<script>
export default {
    name: '登入',
    data() {
        return {
            logining : false,
            account : {
                username:'',
                password:'',
            },
            rules: {
                username :[
                    {required: true, message: '請輸入賬號',trigger: 'blur'},
                    //{ validator: validaePass }
                ],
                password: [
                    {required: true,message: '請輸入密碼', trigger: 'blur'},
                    //{ validator: validaePass2 }
                ]
            },
            checked: true
           
        };
        
    }
}</script>

<style>
    body {
    background-image: url("./assets/zhongda.jpg");
    background-size:100%;
    background-repeat:no-repeat;
}

.login-container {
    width:350px;
    margin-left:35%
}</style>

執行，報錯：

在網上找了很多修改檔案路徑的方法：比如修改util.js、webpack.conf.base.js都沒有用，於是打算嘗試；另外一種引入背景圖片的方法：

在<template>標籤中設定一個單獨的div塊來裝背景圖片，與其他div塊是父子的關係，先寫在最前面，並在data裡面定義該背景div塊的樣式為全填充，如下所示：

<template>中加入：

<div class = "note" :style = "note">

data加入：

data() {
        return {
            logining : false,
            note: {
                position:"absolute",
                top:"0px",
                left:"0px",
                width: "100%",
                height:"100%",
                backgroundImage: "url(" + require("../assets/zhongda.jpg") + ")",
                backgroundSize: "100% 100%",
                backgroundRepeat: "no-repeat",
                
            
            },

再次修改了登入框的樣式，因為真的有點醜，看一下是新的login.vue檔案程式碼：

<template>
<!--背景圖-->

<div class = "note" :style = "note">
<!--login框，表單+tab標籤頁的組合-->
<div class = "loginFrame">
    <el-form ref = "AccountForm" :model = "account"   rules = "rules" label-position = "left" label-width = "0px" class = "demo-ruleForm login-container">
       <!--tab標籤-->
    <el-tabs v-model = "activeName" @tab-click = "handleClick" class = "users">
        <el-tab-pane label = "學生" name = "students">學生</el-tab-pane>
        <el-tab-pane label = "教師" name = "teacher">老師</el-tab-pane>
        <el-tab-pane label = "教務老師" name = "eduTeacher">教務老師</el-tab-pane>
    </el-tabs>

<el-form-item prop = "username">
    <el-input type = "text" v-model = "account_username" auto-complete = "off" placeholder = "請輸入您的賬號"></el-input></el-form-item> 
<el-form-item prop = "password"
    <el-input type = "password" v-model = "account_password" auto-complete = "off" placeholder = "請輸入密碼"></el-input></el-form-item>
<el-checkbox v-model = "checked" checked class = "remember">記住密碼</el-checkbox>
  
<el-form-item style = "width:100%;">
    <el-button type = "primary" style = "width:100%;" >登入</el-button>
</el-form-item>
    </el-form>
    </div>
    </div>

</template>

<script>
export default {
    name: '登入',
    data() {
        return {
            logining : false,
            note: {
                position:"absolute",
                top:"0px",
                left:"0px",
                width: "100%",
                height:"100%",
                backgroundImage: "url(" + require("../assets/zhongda.jpeg") + ")",
                backgroundSize: "100% 100%",
                backgroundRepeat: "no-repeat",
                
            
            },
            account : {
                username:'',
                password:'',
            },
            rules: {
                username :[
                    {required: true, message: '請輸入賬號',trigger: 'blur'},
                    //{ validator: validaePass }
                ],
                password: [
                    {required: true,message: '請輸入密碼', trigger: 'blur'},
                    //{ validator: validaePass2 }
                ]
            },
            checked: false
           
        };
        
    }
}</script>

<style>

.login-container {
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff
    ;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
   
}</style>

由此，再次編譯執行，成功顯示背景圖！（真是太激動了哈哈哈~）

看起來再調一下登入框的樣式就可以搞定樣式部分了~

1. 需要新加一個忘記密碼的超連結，如果忘記密碼了就要跳轉到對應的頁面。

2. 需要設定頂部的tab標籤欄居中，中間各行el-form-item的間距固定並好看；

調了一下午，終於變成了醬紫：

不錯不錯，考慮到我們的主題色是綠色，因此改變一下element-ui的主題色：

1. 安裝主題生成工具

需要在專案資料夾終端內輸入：

npm i element-theme -g
npm i element-theme-chalk -D

2. 修改elementUI主題：

在終端輸入:

et -i

可以看見以下兩行提示，則編譯成功：

> ✔ build theme font
> ✔ build element theme

找到element-variables.scss檔案（安裝完後自動在該資料夾下生成），直接修改該檔案，例如這裡我只需要修改主題色，因此修改：

$--color-primary: green !default;

3. 編譯生成修改的主題：

儲存修改好的element-variables.scss檔案後，直接在終端輸入et編譯，編譯好之後，會在該目錄下生成theme資料夾，為修改之後的主題包

4.引入新的主題：

在main.js中引入新的主題：

import '../theme/index.css'

然後再次執行專案，發現主題已經按照需求更改好啦~（又是一次進步哈哈哈）：

然後，小Tips：

如果對這個顏色不滿意，可以再次修改element-variables.scss檔案，然後再次編譯，編譯成功後，重新執行專案就好~

最後的最後，修改一下tab標籤欄中的字型大小和居中位置即可。

好的，可以居中，不能調字型大小，先這樣將就著看著吧，之後看看能不能再改：

持續更新……

這是初步的Login.vue

<template>
<!--背景圖-->
<div class = "note" :style = "note">

<!--login框，表單+tab標籤頁的組合-->
<div class = "loginFrame">

<!--表單元件放在外面，標籤欄在裡面-->
    <el-form ref = "AccountForm" :model = "AccountForm"   rules = "rules"  class = "demo-ruleForm login-container">

       <!--tab標籤-->
    <div class = "tabsUser">
    <el-tabs v-model = "activeName" @tab-click = "handleClick" class = "users" style = "height: 30px;font-size: 25px">
        <el-tab-pane label = "學生" name = "students" class = "tab1"></el-tab-pane>
        <el-tab-pane label = "教師" name = "teacher" class = "tab2"></el-tab-pane>
        <el-tab-pane label = "教務老師" name = "eduTeacher" class = "tab3"></el-tab-pane>
    </el-tabs>
    </div>

<div class = "formGroup">
<el-form-item  label = "賬號" prop = "user" >
    <el-input type = "text"  auto-complete = "off" placeholder = "請輸入您的賬號" class = "form-control" ></el-input></el-form-item> 
<el-form-item label = "密碼" prop = "password" class = "form-inline">
    <el-input type = "password" auto-complete = "off" placeholder = "請輸入密碼" class = "form-control" ></el-input></el-form-item>
</div>
<div class = "remFor">
<el-checkbox v-model = "checked" checked class = "remember">記住密碼</el-checkbox>
<a href ="'https://blog.csdn.net/Vanadis_outlook/article/details/72823024.html'" class = "forget">忘記密碼？</a>
</div>
  
  <div class = "formButton">
<el-form-item style = "width:100%;">
    <el-button type = "primary" style = "width:100%;" >登入</el-button>
</el-form-item>
</div>
    </el-form>
    </div>
    </div>

</template>

<script>
export default {
    name: '登入',
    data() {
        return {
            logining : false,
            note: {
                position:"absolute",
                top:"0px",
                left:"0px",
                width: "100%",
                height:"100%",
                backgroundImage: "url(" + require("../assets/zhongda.jpeg") + ")",
                backgroundSize: "100% 100%",
                backgroundRepeat: "no-repeat",
                
            
            },
            account : {
                username:'',
                password:'',
            },
            rules: {
                username :[
                    {required: true, message: '請輸入賬號',trigger: 'blur'},
                    //{ validator: validaePass }
                ],
                password: [
                    {required: true,message: '請輸入密碼', trigger: 'blur'},
                    //{ validator: validaePass2 }
                ]
            },
            checked: false
           
        };
        
    }
}</script>

<style>

.login-container {
    
    -webkit-border-radius: 5px;
    border-radius: 15px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: rgba(255,255,255,0.7)

    ;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
   
}
label{
    width:70px;
    text-align:left;
    
    
    }

.form-control{
    width:270px;
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;

}
.remember{
    width:250px;
    text-align:left;

    
}
.forget{
    width:500px;
    text-align:right;
    font-size:14px;
    font-family:PingFang SC;
    
}
.remFor{
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.tabsUser{
    display: inline-block;
    margin-left: 0px;
    margin-right:0px;
    text-align:center;
    font-size:25px;
}



 </style>

從零開始-vue.js（1）登入介面

一、利用Vue cli快速搭建專案

二、安裝必要的包

三、修改程式碼設計登入介面

三、修改Login頁面

從零開始-vue.js（1）登入介面

從零開始-vue.js（2）登入介面之vue-router實現頁面的跳轉

python從零開始寫爬蟲（1）-- 開發環境搭建

從零開始使用tensorflow（1）——安裝

Python從零開始系列連載（1）——安裝環境

【工作筆記】從零開始學ExtJs6（二）——登入模組

微信小程式從零開始開發步驟（七）引入外部js 檔案

Spring Boot+Vue從零開始搭建系統（一）：專案前端_Vuejs環境搭建

從零開始學習html（五）與瀏覽者交互，表單標簽——下

從零開始學習html（十）CSS格式化排版——下

從零開始學習html（十三） CSS代碼縮寫，占用更少的帶寬

從零開始學習MXnet（五）MXnet的黑科技之顯存節省大法

從零開始學HTTP （二） HTTP結構與基礎

從零開始學習熱更新（一）：搭建FTP服務器

從0開始搭建網站（1）

docker從零開始網絡（五）null網絡

docker從零開始存儲（三）bind mounts

Python從零開始寫爬蟲（二）BeautifulSoup庫使用

Python從零開始寫爬蟲（一）requests庫使用

Vue.js（1）- 指令和修飾符

從零開始-vue.js（1）登入介面

一、利用Vue cli快速搭建專案

二、安裝必要的包

三、修改程式碼設計登入介面

三、修改Login頁面

相關推薦