vite创建vue3项目

一.通过vite创建项目

npm init vite

1. 在Project name 后面输入你想要创建的项目名称

 2.我在这里创建的项目名称是 "table"(以table举例),选择vue3回车

3.选择vue或者vue-ts都可以 ，选中回车

 4.根据他的提示

cd table (就是你创建的项目名称)

npm install (下载依赖)

npm run dev (运行 项目就可以跑起来了)

 二、配置路由Router 

 创建src/router/index.ts文件，使用路由懒加载，优化访问性能。

 1.安装

cnpm install vue-router --save

2. 配置router文件 

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/home.vue') // 建议进行路由懒加载，优化访问性能
  },
  {
    path: '/about',
    name: 'About',
       component: () =>
      import(/* webpackChunkName: "about" */ "../views/about.vue"),
  }
]

const router = createRouter({
  // history: createWebHistory(),    // 使用history模式
  history: createWebHashHistory(),	 // 使用hash模式
  routes
})

export default router

3.在main.ts里面引入router 

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";

//可改写成这种样式
const app = createApp(App);
app.use(router);
app.mount("#app");

 4.使用router 

 在App.vue 文件中使用router-view 组件，路由匹配到组件会通过router-view 组件进行渲染

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

 三.安装vuex

cnpm install vuex --save

四、安装Element Plus 

 npm install element-plus --save

 可以选择按需自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件 

npm install -D unplugin-vue-components unplugin-auto-import

 然后在vite.config.ts文件配置一下（直接粘贴过去就可以）

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
//自动导入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  
});

 其他的可以看文档Element-plus 按需导入

 五.安装axios

 cnpm install axios --save

 2.二次封装axios

//二次封装axios
import axios from "axios";

//创建一个实例
const instance = axios.create({
  baseURL: "",基础路径
  timeout: ,//请求超时时间
});

//拦截器
instance.interceptors.request.use(
  (config) => {
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

instance.interceptors.response.use(
  (result) => {
    return result.data;
  },
  (err) => {
    return Promise.reject(err);
  }
);

export default instance;

 3.在request单独建一个文件（api.ts）写接口(接口就可以在其他文件夹中引入直接调用)

import request from "./request";


export const adminLoginApi = (data) =>
  request.post("/admin/login", data);