项目搭建

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()],