以下是使用
Vue3 +
TypeScript +
Vite + Element Plus + Router + Axios搭建
前端项目框架的步骤：
1. 首先，确保你已经安装了Node.js和npm。你可以在命令行中运行以下命令来检查它们的版本：
```shell
node -v
npm -v
```
2. 创建一个新的
项目文件夹，并在该文件夹中打开命令行。
3. 在命令行中运行以下命令来
初始化一个新的
Vite项目：
```shell
npm init
vite
```
在
初始化过程中，你需要选择
Vue作为模板，选择
TypeScript作为语言，并填写
项目名称。
4. 进入
项目文件夹，并安装所需的依赖：
```shell
cd your-project-name
npm install
```
5. 安装
Vue Router、
Vuex和Axios：
```shell
npm install
vue-router@next
vuex@next axios
```
6. 在
项目文件夹中创建一个新的文件夹，用于存放页面组件和路由配置文件。
7. 在src文件夹中创建一个新的文件夹，用于存放页面组件。
8. 在src文件夹中创建一个新的文件夹，用于存放路由配置文件。
9. 在src/router文件夹中创建一个新的文件，命名为index.
ts，并在其中编写路由配置：
```
typescript
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：
```
typescript
import { createApp } from '
vue';
import App from './App.
vue';
import router from './router';
createApp(App).use(router).mount('#app');
```
11. 在src/views文件夹中创建一个新的文件，命名为Home.
vue，并在其中编写一个简单的页面组件：
```
vue
<template>
<div>
<h1>Welcome to Home Page</h1>
</div>
</template>
<script>
export default {
name: 'Home',
};
</script>
```
12.src/App.
vue文件中添加一个路由出口，用于显示组件：
```
vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
```
13. 在src/main.
ts文件中导入并使用Element Plus：
```
typescript
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. 运行以下命令来启动开发服务器：
```shell
npm run dev
```
15. 打开浏览器，并访问http://localhost:3000，你将看到一个简单的页面，其中包含"Welcome to Home Page"的文本。
328
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
