vue3+ts+vite+elementplus+Router+axios搭建前端项目框架

以下是使用Vue3 + TypeScript + Vite + Element Plus + Router + Axios搭建前端项目框架的步骤：

1. 首先，确保你已经安装了Node.js和npm。你可以在命令行中运行以下命令来检查它们的版本：

node -v
npm -v

2. 创建一个新的项目文件夹，并在该文件夹中打开命令行。

3. 在命令行中运行以下命令来初始化一个新的Vite项目：

npm init vite

在初始化过程中，你需要选择Vue作为模板，选择TypeScript作为语言，并填写项目名称。

4. 进入项目文件夹，并安装所需的依赖：

cd your-project-name
npm install

5. 安装Vue Router、Vuex和Axios：

npm install vue-router@next vuex@next axios

6. 在项目文件夹中创建一个新的文件夹，用于存放页面组件和路由配置文件。

7. 在src文件夹中创建一个新的文件夹，用于存放页面组件。

8. 在src文件夹中创建一个新的文件夹，用于存放路由配置文件。

9. 在src/router文件夹中创建一个新的文件，命名为index.ts，并在其中编写路由配置：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  // 添加其他页面的路由配置
];

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

export default router;

10. 在src/main.ts文件中导入并使用Vue Router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

11. 在src/views文件夹中创建一个新的文件，命名为Home.vue，并在其中编写一个简单的页面组件：

<template>
  <div>
    <h1>Welcome to Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

12.src/App.vue文件中添加一个路由出口，用于显示组件：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

13. 在src/main.ts文件中导入并使用Element Plus：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

createApp(App).use(router).use(ElementPlus).mount('#app');

14. 运行以下命令来启动开发服务器：

npm run dev

15. 打开浏览器，并访问http://localhost:3000，你将看到一个简单的页面，其中包含"Welcome to Home Page"的文本。