VUE從零開始系列（上手），呆萌小白上手VUE

第三章 上手

前言

抱歉這回拖得時間有點長，不過我儘可能保證抽出時間來堅持寫下去，另本人水平有限，歡迎你們指正和拍磚。在上一章，你們對整個項目結構應該有所瞭解了，那咱們就開始着手開始寫頁面。

對 vue-cli 的一些修改

因爲咱們用腳手架搭建並不能徹底知足項目的須要，因此咱們要再增長一些東西。

一、安裝vuex作狀態管理

vuex究竟是啥，我後邊再講，總之very好用啊

npm install --save vuex
複製代碼

二、安裝axios

做用就是用來ajax請求， 以前有vue-resource，不事後來vue官方不維護了，推薦用axios。

npm install --save axios
複製代碼

代碼規範

做爲一名合格的前端工程師，咱們的代碼及命名必定要規範，咳咳，講真這個不是爲了看起來好看而已，而是當咱們多人合做開發的時候，有別人接手你的代碼，看到某個組件名字一眼就能知道是用來幹嗎的，這就達到咱們的目的了。好比腳手架裏的歡迎組件：HelloWorld.vue，駝峯式命名，咱們後邊的組件起名就以此爲例。

登陸頁

進入一個後臺管理系統，首先得登陸，如今開始開發一個登陸的頁面組件。爲了便於維護，咱們在src下的pages文件夾（若是沒有這個文件夾就本身建一個。。）下新建一個目錄user而後在該目錄下新建Login.vue文件。

一、配置路由

在具體實現以前，須要先配置下路由，讓咱們可以訪問到該頁面。在路由文件src/router/index.js中，增長剛纔新建的組件。

import Login from '@/pages/user/Login' //引入組件

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login', //路由路徑
      name: 'Login',  //路由名稱
      component: Login //引入的組件
    }
  ]
})
複製代碼

此時在瀏覽器中打開http://localhost:8080/#/login，就進入了這個頁面。

二、動手

打開剛纔新建的Login.vue，開始擼代碼。須要注意一點：每一個template中只能包含一個子節點

//正確寫法
<template>
  <div>...</div>
</template>

//錯誤寫法
<template>
  <div>...</div>
  <div>...</div>
</template>
複製代碼

直接貼代碼，建議你們本身手寫啊，加深下印象。

<template>
    <div class="login_page">
        <section class="form_contianer">
            <div class="manage_tip">
                <p>第一個後臺管理系統</p>
            </div>
             <el-form>
		<el-form-item prop="username">
			<el-input placeholder="用戶名"><span>dsfsf</span></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" placeholder="密碼" ></el-input>
		</el-form-item>
        	<el-form-item>
		    <el-button type="primary" class="submit_btn">登錄</el-button>
		</el-form-item>
	    </el-form>
        </section>
    </div>
</template>
<script>
export default {
  
}
</script>
<style scoped>
  @import '../../assets/css/login.css';
</style>
複製代碼

css樣式咱們單獨放到assets下,而後以組件的形式引入

//login.css
body,html{
    width: 100%;
    height: 100%;
    margin: 0;
}
.el-menu{
    border: none;
}
.login_page{
    background: #324057;
    width: 100%;
    height: 100%;
}
.form_contianer {
    width: 320px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -180px;
    padding: 25px;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
}
複製代碼

如今頁面樣式已經ok了，是否是很簡單啊哈哈。<el-form>是element組件標籤，它已經幫咱們把基本樣ui實現了，你只須要簡單定製下就能夠。具體能夠參考element ui官網。細心的你會發如今style標籤上，有一個scoped屬性，它的做用是限制樣式的做用域，也就是說你在這個組件裏寫的全部樣式，只會對你這個組件生效，而不會影響到其餘組件。完成的頁面以下：

插一句：由於背景色是全屏的，因此咱們須要把login_page的全部父級元素的高度所有設置爲100%，打開 src/App.vue,把樣式替換以下：

body,html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  height: 100%;
}
複製代碼

結語

下一章節咱們繼續完成登陸頁面，包括請求接口，登陸邏輯，稍晚些時候，我會把全部代碼部署到github上，你們能夠直接clone下來使用。

全部章節

• 第一章 安裝腳手架
• 第二章 初體驗
• 第三章 登陸頁
• 第四章 axios
• 第五章 路由鉤子及插件開發