项目搭建

1. 创建一个名为sasa的项目
   npm create vite@latest saas
2. 安装路由
   cnpm install vue-router@4 -s
3. 选择vue+js
4. 在src下新建router/index.js

	import { createRouter, createWebHistory } from "vue-router";
	import Home from "../views/Home.vue";

	const routes = [
	  {
	    path: "/",
	    name: "Home",
	    component: Home,
	  },
	  {
	    path: "/about",
	    name: "About",
	    component: () =>
	      import(/* webpackChunkName: "about" */ "../views/About.vue"),
	  },
	];

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

	export default router;	

5. 在src目录下新建views/Home.vue和About.vue
6. 在app.vue中

<template>
  <router-view />
</template>

7. 在main.js中添加

import router from "./router";
//把createApp(App).mount("#app");-->改成下面的语句
createApp(App).use(router).mount("#app");

8. 安装插件unplugin-auto-import插件
   可以省略 improt {ref} 一类的引入
   命令npm i unplugin-auto-import -D
   在vite.config.js中进行配置 以及 @代表src目录

		import { defineConfig } from 'vite'
		import vue from '@vitejs/plugin-vue';
		//引入插件
		import AutoImport from 'unplugin-auto-import/vite';

		const path = require('path');
		export default defineConfig({
		  plugins: [
		  	vue(),
		  	//配置插件
		  	AutoImport({
		  		imports:['vue','vue-router']
		  	})
		  ],
		  resolve: {
		    // 配置路径别名   @代表src目录
		    alias: {
		      '@': path.resolve(__dirname, './src'),
		    },
		  },
		});

• @代表src目录 如果出现Error: Dynamic require of "path" is not supported的报错
  const path = require('path');
  改成
  import path from "path";

9. 安装element-plus

• npm install element-plus --save
• npm install -D unplugin-vue-components unplugin-auto-import
  这里用的是局部引入,并不是全部的
• 配置修改vite.config.js

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

plugins中添加
 Components({
    resolvers: [ElementPlusResolver()],
 }),
plugins中AutoImport添加
resolvers: [ElementPlusResolver()],

10. 简略的对axios二次封装

• 跨域问题,vite.config.js中

//plugins的后面,两者是同一级
server:{
		proxy:{
			'/api':'http://testapi.xuexiluxian.cn'
		}
	}

• 安装 cnpm install axios -s
• 新建utils/request.js在src中
• import axios from 'axios';

import axios from 'axios';

//1. 创建axios对象
const service = axios.create();

//2. 请求拦截器
service.interceptors.request.use(config => {
  return config;
}, error => {
  Promise.reject(error);
});

//3. 响应拦截器
service.interceptors.response.use(response => {
  //判断code码
  return response.data;
},error => {
  return Promise.reject(error);
});

export default service;

• api解耦
  在utils/api/xxx.js中根据接口文档写,按需更改

import request from '../utils/request'

export function getSliders( data){
	return request({
		url:'/api/course/getSliders',
		method:"post",
		data
	})
}

• 使用 在要用到的文件中

<script setup>
import { getSliders } from "@/utils/api/slider";
onBeforeMount(() => {
  //轮播图数据
  getSliders().then((res) => {
    console.log(res);
  });
});
</script>