之前没有pc端开发基础，工作需要使用若依框架进行了一年的前端开发.最近看到一个视频框架一步步集成，感觉颇受启发，在此记录一下学习心得。视频链接:vue2+element ui 快速入门

环境搭建和依赖安装

1. 安装nodejs
2. 安装Vue Cli
3. 使用vue create project 创建vue2工程
4. 修改C:\Users\guchu.vuerc packageManager 为 npm
5. 使用npm install axios 安装网络请求框架
6. npm install vue-router@3(注意：vue2 对应 vue-router@3, vue3对应vue-router@4)
7. 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>

知识点说明：

1. 元素居中

.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.路由设置

1. 新建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;

2. main.js进行挂载

import router from './router';
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

3. 添加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

添加网络请求

1. 拦截网络请求，添加校验头
   新建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;

2. 创建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
};

4. 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'
                }
            }
        },

    }
})

4. 对网络接口进行集中管理
   新增 src/api/index.js

import login from './login'

export default {
    login,
}

5. 将api挂在Vue简化import

import api from './api';
Vue.prototype.$api = api;

6. 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})
            }
          })

其他

1. 编译运行ESLint 报错
   /.eslintrc.js 添加一下内容（没有进行新建）

module.exports = {
    rules: {
        "*": "off"
    },
};

/vue.config.js 添加 lintOnSave:false

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
})