用Vue实现一个登陆界面
Vue 实现 一个 界面 登陆
2023-09-11 14:21:56 时间
用Vue实现一个登陆界面
总是从园子里索取,所以也想写点东西,欢迎大家批评指教。
最近由于一些原因,开始学习vue的项目开发,对于我这样一个刚刚入行的菜鸟级c#程序员,可真踩了不少坑,
接下来,废话少说。
一、搭建环境
本人win10开发环境(资深大佬勿喷,我没有mac,也没有安装linux环境)
1.首先安装node环境,本项目中主要是用来做包管理。传送门(https://nodejs.org/zh-cn/)
2.安装vue
打开控制台输入,并等待完成
npm insatll vue -g
3.安装vue-cli(脚手架),用来构建项目。传送门(https://segmentfault.com/a/1190000008644830)
npm install -g vue-cli
我们这里使用webpack作为脚手架,初始化我们的项目(注意,项目名必须是小写)
vue init wepcak my-project
二、项目目录
1.目录如下(Visual Studio Code 个人认为挺好用的)
我们现在可以进入项目目录(根据自己的项目名)
cd my-project npm run dev // 这样就可以看到我们刚刚构建的项目,相信你也和我一样懵逼吧。
2.进行我们的改造,接下来才是正题(Code Show)
我们的源码主要是在src目录下,(删除该目录下原始文件)
目录情况如下
|-------src
| |-- components
| | |-- Main.vue
| | |-- Login.vue
| |-- main.js
|------- index.html (提示,在根目录下)
- index.html 代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>my-project</title> </head> <body> <div id="app"> </div> <!-- built files will be auto injected --> </body> </html>
- /src/main.js 代码如下
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' // 引入vue.js插件 import VueRouter from 'vue-router' // 组件 import Main from './components/Main.vue' import Login from './components/Login.vue' Vue.config.productionTip = false const routes = [ { name: 'main', path: '/', component: Main }, { name: 'login', path: '/login', component: Login } ] var router = new VueRouter({ routes }) Vue.use(VueRouter) var App = { template: '<router-view></router-view>' } /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
- /src/components/Login.vue
<template> <div class="login"> <div class="input-wrap"> <input type="text" v-model="name"/> <span v-if="error.name" class="err-msg">{{error.name}}</span> </div> <div class="input-wrap"> <input type="password" v-model="pwd"/> <span v-if="error.pwd" class="err-msg">{{error.pwd}}</span> </div> <div class="input-wrap"> <button @click="login">提交</button> </div> </div> </template> <script> export default { data() { return { name: '', pwd : '', error : { name: '', pwd : '' } } }, methods : { check(name,pwd) { if(!name) { this.error.name = '请输入姓名' return false } if(!pwd){ this.error.pwd = '请输入密码' return false } }, login() { const { name, pwd, $router} = this if(!this.check(name,pwd)) return if(name == 'admin' && pwd == '123'){ $.router.push({ name : 'main' }) } else { alert('用户名错误') } } } } </script> <style scoped lang="scss"> .login { width: 300px; margin: 10% auto; } </style>
- /src/components/Main.vue
<template> <div class="main"> <h1>{{ msg }}</h1> </div> </template> <script> export default { data () { return { msg: 'Welcome to the Vue.js' } } } </script> <style> .main { font-size: 14px; color: #58666e; background-color: #1c2b36 } </style>
项目完成。 在命令台输入以下代码
npm run dev
在浏览器输入 http://localhost:8080,即可进入登陆页面。 用户名:amin 密码 :123
三、效果图
四、总结
本次示例采用的是vue2.0版本,希望大家批评指正不当之处。
源码奉上 2018-03-2416:03:57
相关文章
- vue 学习资源链接,总结
- Vue Router 路由实现原理实现原理
- Vue Comparison with Other Frameworks
- 用Tornado实现web聊天室(前端采用vue+bootstrap)
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- 【Vue】通过keep-alive实现路由组件的数据缓存
- 【Vue】vue中VM的生命周期及加载和销毁实例
- 【Vue】Vue的安装环境搭建以及vue2.0-devtools和vue3.0-devtools6.0调试插件安装
- vue+iview 通过a标签实现文件下载
- Vue - 拖曳式可视化生成应用软件(适合迭代的基础架构、低代码平台)
- Vue - [完整源码] 实现分类菜单 + 轮播图组合布局效果,类似左侧菜单与右侧轮播图连接在一起的效果(当鼠标移入菜单时,侧边出现子菜单列表)常见于商城系统,示例代码注释详细开箱即用!
- JavaScript - Vue / React 实现网页标题文字滚动效果,在浏览器标题栏页签选项卡上进行滚动的特效(详细示例源代码)前端所有技术栈通用,适用于任何前端项目!
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- 详解Vue PC端如何实现扫码登录功能
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- Vue.nextTick浅析
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- 基于Java(Spring boot+Hibernate)+VUE+MySQL实现(Web)员工信息管理系统【100010234】
- vue使用echarts库
- vue项目中两种回车键搜索功能实现
- vue实现点击修改文字
- vue框架与koa2服务器实现跨域通信
- 浅析如何使用Vue + Xterm.js + SpringBoot + Websocket / Stomp + JSch 实现一个 web terminal 网页版的终端工具
- vue-router登录校验后跳转到之前指定页面如何实现
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- 学习Vue的一些看法
- flask+vue:创建一个数据列表并实现简单的查询功能(三)
- flask+vue:创建一个数据列表并实现简单的查询功能(一)
- You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
- Vue开发实例(12)之实现动态左侧菜单导航
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。