# 初始化新项目方式1

# 第一步：初始化新项目

使用 Vite 创建 Vue3 + TypeScript 项目

假设你用的是 pnpm（也可以用 npm/yarn，命令类似）：

pnpm create vite my-admin --template vue-ts

cd my-admin

pnpm install

# 第二步：安装必要依赖

pnpm add element-plus vue-router@4 pinia

# 第三步：整理目录结构

推荐的目录结构如下：

my-admin/
├── src/
│   ├── api/           # 封装接口请求
│   ├── assets/        # 静态资源
│   ├── components/    # 公共组件
│   ├── router/        # 路由配置
│   ├── store/         # 状态管理
│   ├── views/         # 页面
│   ├── App.vue        # 根组件
│   └── main.ts        # 入口文件
├── public/
├── package.json
├── vite.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13

你可以先手动创建这些文件夹。

# 第四步：配置 Element Plus

在 src/main.ts 中引入 Element Plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

1
2
3
4
5
6
7
8

# 第五步：配置路由

新建 src/router/index.ts：

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

const routes = [
  { path: '/login', component: () => import('../views/Login.vue') },
  { path: '/', component: () => import('../views/Dashboard.vue') }
]

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

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13

← Flex布局 pnpm是什么？ →