用Vue实现一个登陆界面

用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

posted @ 2019-12-03 14:05  grj001  阅读(279)  评论(0)  编辑  收藏  举报