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
• 第五章 路由钩子及插件开发