1. 初始化项目
新建一个文件夹,使用cmd切换到该目录下,接下来在该目录下新建一个test2的项目
命令: vue init webpack test2 (这里的test2是项目名称)
项目目录结构:
项目目录结构
2. 创建首页
-
在
src目录下创建views目录,并在views目录下创建index目录,专门用来放首页相关的组件,并在index目录下创建index.vue文件
创建index.vue文件 编辑
index.vue文件,目前只是为了看到效果,简单的添加一个div就可以了
<template>
<div>
欢迎来到后台管理系统
</div>
</template>
- 在
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
}
]
})
-
启动项目(
npm run dev)
在浏览器中输入 : http://localhost:8081/#/index 即可显示如下界面:
index界面 这样简单的效果就出来了
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>
密 码: <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的视图组件开发模式.
水平有限,欢迎大家批评指正~
