Vue2 + ElementUI + axios + VueRouter入门
之前没有pc端开发基础，工作需要使用若依框架进行了一年的前端开发.最近看到一个视频框架一步步集成，感觉颇受启发，在此记录一下学习心得。视频链接:vue2+element ui 快速入门
环境搭建和依赖安装
- 安装nodejs
- 安装Vue Cli
- 使用vue create project 创建vue2工程
- 修改C:\Users\guchu.vuerc packageManager 为 npm
- 使用npm install axios 安装网络请求框架
- npm install vue-router@3(注意：vue2 对应 vue-router@3, vue3对应vue-router@4)
- npm i element-ui -S 安装elementUI框架
开发过程
静态登录页面开发
1. 将elementui注入Vue
修改main.js 添加一下内容：
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUi)
2. 编写静态页面：
新增src/pages/login/index.vue文件
<template>
<div class="login">
<el-form label-width="80px" ref="formRef" :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" placeholder="请输入密码" type="password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{required: true, message: '用户名不能为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不能为空', trigger: 'blur'}
]
}
}
},
methods: {
login() {
this.$refs.formRef.validate(valid => {
if (valid) {
this.$message({type: 'success', message: '验证通过'})
} else {
this.$message({type: 'error', message: '验证失败'})
}
})
}
}
}
</script>
<style scoped>
.login {
position: absolute;
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
知识点说明：
- 元素居中
.login {
position: absolute;
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
top\left从中心点开始布局，然后向左上角移动50%。
2. 表单和数据的双向绑定:model = form
3. 指定表单验证规则 :rules=“rules” prop具体校验字段 this.$refs.formRef.validate进行所有字段校验。
3.路由设置
- 新建src/router/index.js
import Vue from 'vue'
import VueRouter from "vue-router"
import Login from '../pages/login'
Vue.use(VueRouter)
const routes = [{
path: "/login",
component: Login
}]
const router = new VueRouter({
routes,
mode: 'hash'
})
export default router;
- main.js进行挂载
import router from './router';
new Vue({
router,
render: h => h(App),
}).$mount('#app')
- 添加router-view 展示路径对应的组件
<template>
<div id="app">
<router-view/>
<!-- <img alt="Vue logo" src="./assets/logo.png">-->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
</div>
</template>
http://localhost:8080/#/login
添加网络请求
- 拦截网络请求，添加校验头
新建src/utils/request.js
import axios from 'axios'
const request = axios.create({
timeout: 5000
})
request.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers["authorization"] = token;
}
return config;
}
)
export default request;
- 创建login具体网络请求
新建src/api/login.js
import request from "@/utils/request";
const login = (admin) => {
return request({
url: '/dev-api/auth/login',
method: 'post',
data: admin
})
}
export default {
login
};
- vue.config.js 设置代理地址
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
lintOnSave: false,
transpileDependencies: true,
devServer: {
proxy: {
'/dev-api': {
target: `http://localhost:28080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '/dev-api'
}
}
},
}
})
- 对网络接口进行集中管理
新增 src/api/index.js
import login from './login'
export default {
login,
}
- 将api挂在Vue简化import
import api from './api';
Vue.prototype.$api = api;
- login页面进行调用
this.$api.login.login(this.form).then(response => {
const {code, msg, data} = response.data;
if (200 === code) {
this.$message({
type: 'success',
message: '登录成功'
})
localStorage.setItem('token', data.access_token);
this.$router.push("/")
} else {
this.$message({type: 'error', message: msg})
}
})
其他
- 编译运行ESLint 报错
/.eslintrc.js 添加一下内容（没有进行新建）
module.exports = {
rules: {
"*": "off"
},
};