一. 开发工具:Webstrom,电脑需要安装有node,vue-cli,mongo数据库
二. 在本地创建一个文件夹,使用Vue-CLI初始化项目,命名为vuelogin,初始化完成后,分别输入命令cd vuelogin,npm run dev,查看是否正常运行(一般都可以)
2.1 用Webstrom打开vuelogin, 在项目下面的Terminal,输入以下安装命令
npm install element-ui --save
npm install axios --save
2.2 src > main.js 代码:
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 引入axios
import axios from 'axios'
// 挂载到vue的原型上
Vue.prototype.axios = axios;
Vue.config.productionTip = false;
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});
2.3 src > components 文件夹下新建 login.vue,代码如下:
<template>
<div class="login">
<!-- 登录表单 -->
<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm">
<h1><i class="el-icon-switch-button" style="margin-right: 10px;margin-left: 30px"></i>VueX登录表单</h1>
<el-form-item label="用户名" prop="username">
<el-input type="text" v-model="loginForm.username" autocomplete="off">&l