vue3 + Vite 从0到1搭建框架

本文宗旨，尽量简短！但又步骤完整。

主要功能：vue-router, ElementPlus, Pinia, 封装axios

虽然小步骤没有编号，从上往下按顺序看就行。

目录

1. 使用vite构建项目

1.1 执行命令

 1.2 选择Vue 回车

1.3 安装依赖，运行项目

 1.4 构建成功，查看页面​编辑

2. vue-router

2.1 安装

2.2 使用

3. ElementPlus

3.1 安装

3.2 使用

4.Pinia

4.1 安装

4.2 使用

5.axios

5.1 安装

5.2 封装

 6. 打包优化

6.1请看博文

6.2 优化结果（1.17MB-168KB）

---

1. 使用vite构建项目

1.1 执行命令

npm create vite@latest

 1.2 选择Vue 回车

1.3 安装依赖，运行项目

cd vue-vite

npm install
npm run dev

 1.4 构建成功，查看页面

2. vue-router

2.1 安装

npm install vue-router

2.2 使用

在src目录下新建view文件夹，并添加两个文件page1.vue、page2.vue;

在src目录下新建router文件夹，并添加index.js

此时src目录文件结构

page1.vue

<template>
  <img src="/vite.svg" class="logo" alt="Vite logo" />
</template>

page2.vue 

<template>
  <img src="/vue.svg" class="logo vue" alt="Vue logo" />
</template>

在vite.config.js设置别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    }
  },
})

  src/router/index.js 使用别名“@”导入vue文件

import { createRouter, createWebHistory } from "vue-router";
import page1 from "@/view/page1.vue";
import page2 from "@/view/page2.vue";

const routes = [
  { path: "/", component: page1 },
  { path: "/page2", component: page2 },
];

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

export default router;

main.js 引入router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router'

const app = createApp(App);

app.use(router)
.mount('#app')

app.vue

<template>
  <router-link to="/">page1</router-link><br/>
  <router-