1. 安装依赖
npm install vue-router@3.2.0
npm install vuex@3.6.2
npm i element-ui -S
npm install less@3.0.0
npm install less-loader@5.0.0
先cd进到目录下再npm run sever
初始化一个干净的app.vue
删除helloworld.vue
2. 在components文件夹下面新建一个Login.vue文件，并在路由中进行设置
在src路径下新建一个router.js文件
import Vue from "vue"
import Router from "vue-router"
import Login from "./components/Login"
Vue.use(Router)
const router=new Router({
routes:[
{path:"/",component:Login}
]
})
export default router
3. 在main.js中导入router
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.use(router);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router, //注册router
render:h=>h(App)
})
4. 在app中使用router-view
<router-view></router-view>
5.
5.完成Login.vue的html结构
<template>
<div class="logout">
<div class="login">
<div class="tu">
<img src="../assets/logo.png" alt="">
</div>
<div class="neirong">
<el-button type="danger">提交</el-button>
</div>
</div></div>
</template>
<script>
export default {
}
</script>
<style scoped>
.logout{
width: 100vw;
height: 100vh;
background-color: dodgerblue;
}
.login{
width:600px;
height: 400px;
background-color: white;
border-radius: 40px;
box-shadow: 3px 3px 3px #8a8888 ;
margin: 0px auto;
transform: translateY(50%);
}
.tu{
width: 200px;
height: 200px;
border-radius: 100%;
background-color: aqua;
overflow: hidden;
position: absolute;left:200px;top: -50px;
box-shadow: 3px 3px 3px #8a8888 ;
}
</style>
6. 按需导入elementUI，参考网址 https://element.eleme.cn/#/zh-CN/component/quickstart
npm i element-ui -S
npm install babel-plugin-component –D
修改babel.config.js文件
在main.js中按需导入
import {Button} from "element-ui"
Vue.use(Button)
.添加表单元素，添加样式2.给app.vue添加样式 ，去除页面的白边3. 添加验证规则：具体步骤为，注意添加表单校验的元素1. 给form添加:rules规则2. 在data中添加rules规则3. 使用测试 4. 添加重置功能：具体步骤是给el-form添加ref属性，给重置按钮添加事件，使用elementUI的重置方法5. 设置提交前的预验证：方法是给el-form添加ref属性，给重置按钮添加事件，使用elementUI的预校验方法
安装 axios
npm install axios
在main.js中配置axios
import axios from 'axios'
axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http=axios
安装phpstudy
开启mysql，关闭apache
先shift+鼠标右键 打开命令行窗口然后 npm install
完成以后相当于开启了服务器
发送请求
添加请求成功的命令
