vite创建vue3引入elementui-plus + vue-router4过程_element vue route vite

# 使用npm或者yarn创建一个新的Vue 3项目
npm create vite@latest my-vue3-app --template vue-ts
 
# 进入项目目录
cd my-vue3-app
 
# 安装Element Plus
npm install element-plus --save
 
# 安装Vue Router 4
npm install vue-router@4 --save
 
# 安装必要的类型定义
npm install @types/node --save-dev
 
# 创建src/router/index.ts文件
mkdir -p src/router && touch src/router/index.ts
 
# 创建src/views/Home.vue文件
mkdir -p src/views && touch src/views/Home.vue
 
# 编辑src/main.ts和src/router/index.ts文件

src/main.ts 示例代码：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Home from './views/Home.vue'
 
// 定义路由
const routes = [
  { path: '/', component: Home }
]
 
// 创建router实例
const router = createRouter({
  history: createWebHistory(),
  routes
})
 
const app = createApp(App)
 
// 使用Element Plus
app.use(ElementPlus)
 
// 使用路由
app.use(router)
 
app.mount('#app')

src/router/index.ts 示例代码：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
  // 可以继续添加更多的路由
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
 
export default router

src/views/Home.vue 示例代码：

<template>
  <div>
    <el-button>Click Me</el-button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue'
 
export default defineComponent({
  name: 'Home'
})
</script>

以上命令和代码示例展示了如何使用Vite创建一个新的Vue 3项目，并且引入Element Plus和Vue Router 4。这为开发者提供了一个基础模板，可以在此之上进行进一步的开发工作。