使用IDE进行Vue项目搭建

一、新建项目

1. 打开ide，选择新建项目

2. 选择使用vue.js新建

二、安装依赖

1. 安装默认依赖

在该项目下打开命令行，安装依赖

npm install

 2. 安装常用依赖

npm install axios

npm install element-plus

npm install vue-router

或者使用一条命令直接安装多个依赖

npm install axios element-plus vue-router

三、删除不必要的文件

1. 删除public，assets，components目录下的文件

删除之后大概就是这样

四、编写各个文件

1. .env

在项目目录下新建.env文件

VITE_API_BASE_URL=http://localhost:8061/api

2. .env.production

 在项目目录下新建.env.production文件

VITE_API_BASE_URL=https://你的正式服务器域名/api

3. request.js

在src目录下新建utils包，在utils包下新建request.js文件，编写request.js

import axios  from "axios";

const request = axios.create({
    baseURL: import.meta.env.VITE_API_BASE_URL,
    timeout:5000
})

request.interceptors.response.use(res =>{
    return res.data.data
},err => Promise.reject(err))

export default request

4. 在src目录下新建router/index.js

import {createRouter,createWebHistory} from 'vue-router'


const routes = [

]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

2. main.js

import { createApp } from 'vue'
import './style.css'
import App from "./App.vue";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from "./router/index.js";

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')