前端标准化工程构建

1.创建一个vue项目

 

 2.进入工程后，下载包并运行起来

 3.git初始化构建

git init
git add .
git commit -m "前端工程初始构建"

 4.在src文件夹下新建几个文件夹

        styles  全局样式

        utils  工具

        diretives  指令

        api  网络访问

5.创建vscode配置文件

jsconfig.json   目的是为了输入@符输入路径时，会自动关联。

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths":{
            "@/*":[
                "src/*"
            ]
        }
    }
}

6.导入element-plus

npm install element-plus --save

按需导入

npm install -D unplugin-vue-components unplugin-auto-import

插入的代码

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })

插入的位置 

 7.axios配置

utils

   -http.js  

const  axiosHttpInstance = axios.create({
    baseURL:"http://localhost:8080/api",//每次访问路径不用重复写
    timeout:5000
})

//请求操作拦截器
axiosHttpInstance.interceptors.request.use(config=>{
   return config;   
}, e => {
    return Promise.reject(e);
})

//axis响应拦截器
axiosHttpInstance.interceptors.response.use(
   res=>{
     console.log(res.data);
   },
   e => {
     return Promise.reject(e) 
   }
);

export default axiosHttpInstance;

api

  -testAxios.js

import httpInstance from '@/utils/http'

export function getBookList(){
     return httpInstance({
        url:'/books'
     })
}