使用vue脚手架搭建基础项目

1.安装

vue init webpack home

//运行
npm run dev

仅支持vue3

vue create admin

//运行
npm run serve

2.安装iview
3.安装axios(发送ajax请求)
4.安装qs
如果不安装发送ajax请求不是以表单的形式发送的
cnpm install qs --save
5.在src目录下新建一个api目录，api的目录下新建文件axios.js和index.js
6.axios.js

import axios from 'axios';
import qs from 'qs';
import iview from 'iview';

axios.defaults.baseURL = 'http://api.myvue.com/admin/';
axios.defaults.timeout = 50000;
axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"

// 添加请求拦截器
axios.interceptors.request.use(config => { 
    if (config.method == 'post') {
        if (!config.data) {
            config.data = {};
        }

        config.data = qs.stringify(config.data);
    } else if (config.method == 'get') { 

    }

    return config;
}, error => { 
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(res => { 
    if (typeof res.data == 'string') {
        alert(res.data);
        return false;
    }

    switch (res.data.ret) {
        case 200:
            return res.data.data;
        case 300:
            // 重定向
            break;
        default:
            iview.message.error(res.data.msg);
            return false;
    }
}, error => { 
    return Promise.reject(error);
});

export default axios;

	

7.index.js

import ajax from './axios';

let api = {

    user: {
        list: param => { 
            return ajax.post('user/list', param);
        },
        info: id => { 
            return ajax.post('user/info', id);
        },
        insert: param => { 
            return ajax.post('user/insert', param);
        },
        delete: id => {
            return ajax.post('user/delete', id);
        },
        update: param => { 
            return ajax.post('user/update', param);
        },
        changeStatus: id => {
            return ajax.post('user/changeStatus', id);
        },

    },

};

export default {
    install: Vue => { 
        Vue.api = api,
        Vue.prototype.$api = api
    }
}

8.在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css'   // 使用 CSS
import api from './api'

Vue.config.productionTip = false
Vue.use(iView)
Vue.use(api)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

9.跨域
9.1发送jsonp请求
9.2后台代码添加Error.php

<?php
namespace app\admin\controller;

use think\Controller;
use think\Db;

class Error extends Controller
{
    public function initialize()
    {
    //允许所有的都可以跨域
        header("Access-Control-Allow-Origin:*");
    }

    
}

如果以上的方法8.2不能解决跨域的问题，可以使用如下方法
在tp的入口文件中添加如下代码

//*可以改成允许跨域的链接
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE");
header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");

10.使用

<template>
</template>
<script>
    export default {
        data () {
            return {
				data1:[]
            }
        },
		mounted() {
			this.list();
		},
		methods:{
			async list(){
				let res=await this.$api.user.lists();
				if(res){
					this.data1=res.data;
					console.log(this.data1);
				}
			},
		}
		
    }
</script>