Vue.js前端开发实战-----常用UI组件

1.进入命令行界面，执行yarn create vite命令，输入项目名称，选择Vue框架，选择JavaScript，完成vue项目创建。

2.在完成创建之后在其目录下通过yarn安装ElementPius，具体命令如下：

      yarn add [email protected]  --save

3.在VSCode中创建一个新的vue文件，文件名称命名分别为MyInfo.vue

，RoommateDetail.vue，RoommatesList.vue,

文件中编写组件的逻辑代码，样式、结构。

4. .使用 Element UI 的 El-table 组件，在 Vue.js 应用中展示室友信息，包括室友的姓名等信息。

5.在App.vue中引入vue文件

6.在main.js中导入并挂载路由模块

详细代码如下：

MyInfo.vue

RoommateDetail.vue：

RoommatesList.vue：

App.vue:

router.js:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import MyInfo from '../components/MyInfo.vue'
import RoommatesList from '../components/RoommatesList.vue'
import RoommateDetail from '../components/RoommateDetail.vue'

const routes = [
  { path: '/', component: MyInfo },
  { path: '/roommates', component: RoommatesList },
  { path: '/roommates/:id', component: RoommateDetail, name: 'RoommateDetail' }
]

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

export default router

main.js中挂载：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

结果展示我的信息，室友信息及室友详情页