1. 初始化项目

新建一个文件夹,使用cmd切换到该目录下,接下来在该目录下新建一个test2的项目
命令: vue init webpack test2 (这里的test2是项目名称)

项目目录结构:

项目目录结构

2. 创建首页

1. 在src目录下创建views目录,并在views目录下创建index目录,专门用来放首页相关的组件,并在index目录下创建index.vue文件
   

   创建index.vue文件

2. 编辑index.vue文件,目前只是为了看到效果,简单的添加一个div就可以了

<template>
    <div>
        欢迎来到后台管理系统
    </div>
</template>

3. 在src/router/index.js文件中配置路由信息

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Index from '../views/index/index' // 导入我们编写的vue组件

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 配置路由地址
    {
      path: '/index',
      name: 'Index',
      component: Index
    }
  ]
})

4. 启动项目(npm run dev)
   在浏览器中输入 : http://localhost:8081/#/index 即可显示如下界面:
   

   index界面

5. 这样简单的效果就出来了

3. 准备输入框和提交按钮

• 输入框: src\components\InputBox.vue

<template>
    <input type="text" />
</template>

<style>
    input{
        border: 1px solid #ccc;
        padding: 7px 0px;
        border-radius: 3px;
        padding-left:5px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
    }
    input:focus{
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
    }
</style>

• 提交按钮框: src\components\SubmitButton.vue

• 在src\views\index\index.vue中添加组件

<template>
    <div>
        <h1>欢迎来到后台管理系统</h1>
        用户名: <input-box></input-box>
        <br><br>
        密&nbsp;&nbsp;码: <input-box></input-box>
        <br><br>
        <submit-button></submit-button>
    </div>
</template>
<script>
import InputBox from '../../components/InputBox'
import SubmitButton from '../../components/SubmitButton'
export default {
    components: {
        InputBox,
        SubmitButton
    }
}
</script>

重启项目以后,界面如下:

项目效果图

上面只是演示了使用vue-cli开发项目的基本流程,更多的是了解vue的视图组件开发模式.

水平有限,欢迎大家批评指正~