vite+vue3+element-plus

原创已于 2023-11-05 18:41:21 修改 · 626 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui #vue

于 2023-09-04 21:27:08 首次发布

本文介绍了如何使用Vite构建一个基于Vue3、ElementPlus和VueRouter的项目，包括引入ElementUI、设置路由、创建布局、集成axios进行API交互以及处理跨域问题的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vite+vue3+element-plus

1.开始

npm create vite@latest app -- --template vue

npm installl

npm run dev

2.引入element-ui

npm install element-plus

修改main.js

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')

3.安装vue-router

npm install vue-router@4

修改main.js

import router from "./router"

.use(router)

不识别@

npm i @types/node -D

修改vue.config.js

import { resolve } from 'path'

export default defineConfig {
    // ...
    resolve: {
        alias: {
            "@": resolve(__dirname, 'src'), // 路径别名
        },
        extensions: ['.js', '.json', '.ts'] // 使用路径别名时想要省略的后缀名，可以自己 增减
    }
}

index.js

import { createRouter, createWebHistory } from "vue-router"
import Index from '@/view/index/index.vue'

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

        { path: '/', redirect: '/index' },
        {
            path: '/',
            name:'index',
            component: () => import('../view/index/index.vue'),
            children:[
                {
                    path: '/index',
                    name: 'index',
                    component: Index
                }
            ]
        }
    ]
})

export default router

4.设置layout

创建 layout

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
      </el-aside>
      <el-main>
      </el-main>
    </el-container>
  </div>
</template>

main.js

import Layout from '@/view/layout/index.vue'
.component('default-layout',Layout)

router

        {
            path: '/',
            name:'index',
            component: Layout,
            meta:{
                title:'首页'
            },
            children:[]
           }

在这里插入图片描述

5.axios

npm installaxios

创建 axios.js

import axios from 'axios'
 
/*
 * 创建实例
 * 与后端服务通信
 * baseURL: import.meta.env.VITE_BASE_URL,
 */
export function http(config){
	const HttpClient = axios.create({
	  baseURL: '/data',
	});

	 
	/**
	 * 请求拦截器
	 * 配置请求头
	 */
	HttpClient.interceptors.request.use(
	  (config) => {
	    const token = '';
	    config.headers.authorization = 'Bearer ' + token;
	    return config;
	  },
	  (error) => {
	    console.error('网络错误，请稍后重试');
	    return Promise.reject(error);
	  },
	);
	 
	/**
	 * 响应拦截器
	 * 处理异常
	 */
	HttpClient.interceptors.response.use(
	  (config) => {
	    return config;
	  },
	  (error) => {
	    return Promise.reject(error);
	  },
	);
	
	return HttpClient(config) 
}

创建api

import { http } from '@/util/axios.js'

export function findTables(data){
	return http({
		  method: 'post',
		  url: 'sql/select',
		  data: data
		});
}

使用

	import { findTables } from '@/util/api.js'
	
	findTables({参数})
	.then((ret)=>{
		console.log(ret)
	})

6.跨域问题

    server: {
           hmr:true,     //启动热更新，就是更改了代码自动刷新页面
           port: 8082,    //自定义启动时的端口
           open: true,   //代表vite项目在启动时自动打开浏览器 
           proxy:{
            "/sql": { 
                     target: "http://localhost:8888",
                     //你的需要请求的服务器地址
                     changeOrigin: true, // 允许跨域
                     secure: false,  //忽略安全证书   
                     rewrite: (path) => path.replace(/^\//, 'sql'), // 重写路径把路径变成空字符,
            },
        }
     }