① 使用Vue+Element UI创建简单的登录页面
创建Vue项目:
命令行进入项目文件夹,输入:
vue create spring_vue_project(项目名)
启动Vue项目:
进入vue项目文件夹,输入:
cd spring_vue_project
启动项目,输入:
npm run serve
Vue项目文件简单介绍:
node_modules: 存包管理的一些依赖,如果项目需要上传到版本控制平台,不建议上传此文件夹(拷贝下来的项目可以通过 npm i 进行下载
public:放公有文件
src: 编写前端代码主要涉及到的文件,main.js为整个项目的入口文件
package.json: 版本,启动命令。“dependencies” 为生产环境依赖, “devDependencies” 为开发环境依赖
修改vue.config.js设置项目端口及自启动:
module.exports={
devServer:{
port:8090, //端口
host:'localhost',
open:true, //自启动
}
}
修改完成后,重启Vue项目
安装并引入 Element UI:
安装:
npm i element-ui -S
引入依赖:
在main.js中写入一下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
分别创建 home.vue 和 login.vue 两个页面文件并配置路由:
在views文件夹下创建 home.vue 和 login.vue
在router文件夹下的 index.js 中修改路由:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/', //如果url为空,重定向到home页面
redirect:'/home'
},
{
path: '/home',//主页
name: 'home',
component:()=>import('../views/home.vue')
},
{
path: '/login',//登录页
name: 'login',
component:()=>import('../views/login.vue')
}
]
const router = new VueRouter({
routes
})
export default router
修改 App.vue,让他显示路由页面:
<template>
<div id="app">
<router-view/>
</div>
</template>
使用 Element UI 完善 login.vue:
功能:
- 输入框校验(是否输入,输入长度范围)
- 验证成功后跳转到 home.vue
具体实现(通过 Form组件完成):
<template>
<div class="about">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default{
data(){
return{
ruleForm:{
username:'',
password: