自学内容网 自学内容网

Vue3工程基本创建模板

创建vue工程 

执行这两个绿色的命令

输入 code .   打开vscode

 安装依赖

Element - plus

npm install element-plus --save

在vscode的  main.js  换这个代码

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Axios

npm install axios

Sass

npm sass -D

调整目录

在utils新建这个文件  后缀名为js    或者在vscode里面创建也可以

代码

//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL})


//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

在src的src的assets把原来有的删掉,然后添加自己所需要的图片

把App.vue的代码换成一下代码

<script setup>

</script>

<template>
hello v3
</template>

<style scoped>

</style>

已经成功了


原文地址:https://blog.csdn.net/2301_78955442/article/details/143084745

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!