vue3 elementplus个人主页

### 如何使用 Vue3 和 Element Plus 创建个人主页 要创建一个基于 Vue3 和 Element Plus 的个人主页，可以按照以下方法构建基础框架并扩展功能。 #### 1. 初始化项目 通过 `yarn` 或 `npm` 创建一个新的 Vue3 项目，并选择合适的模板。 ```bash yarn create vite my-personal-page --template vue cd my-personal-page ``` 安装依赖项： ```bash yarn add element-plus ``` 如果需要自动导入组件和 API 功能，则额外安装插件[^3]: ```bash yarn add -D unplugin-vue-components unplugin-auto-import ``` 配置 Vite 插件以支持自动导入（可选），编辑 `vite.config.js` 文件： ```javascript import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' export default { plugins: [ AutoImport({ imports: ['vue', 'vue-router'], dts: './auto-imports.d.ts', }), Components({ resolvers: ['element-plus'] }) ] } ``` #### 2. 配置全局样式与注册 Element Plus 在项目的入口文件中引入 Element Plus 并完成初始化操作[^1]： ```javascript // main.js or main.ts 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'); ``` #### 3. 设计页面结构 定义首页布局，通常包括导航栏、侧边菜单和个人信息展示区域。以下是简单的 HTML 结构示例[^4]: ```html <template> <el-container style="height: 100vh;"> <!-- 左侧菜单 --> <el-aside width="200px"> <el-menu :default-active="$route.path" router> <el-menu-item index="/"> <i class="el-icon-s-home"></i> 主页 </el-menu-item> <el-menu-item index="/about"> <i class="el-icon-user-solid"></i> 关于我 </el-menu-item> </el-menu> </el-aside> <!-- 右侧主要内容区 --> <el-main> <router-view /> </el-main> </el-container> </template> ``` #### 4. 添加路由管理 设置 Vue Router 来控制不同页面之间的切换。首先安装 Vue Router： ```bash yarn add vue-router@next ``` 接着，在 `src/router/index.js` 中定义路由表： ```javascript import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '../views/HomeView.vue'; import AboutMe from '../views/AboutMe.vue'; const routes = [ { path: '/', name: 'Home', component: HomeView }, { path: '/about', name: 'About', component: AboutMe } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 最后，在主应用实例中挂载路由器： ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; // 导入路由模块 createApp(App).use(router).mount('#app'); ``` #### 5. 实现交互逻辑 利用 Composition API 编写业务逻辑。例如，下面是一个带有按钮点击事件的简单例子[^2]： ```html <script setup> import { ref } from 'vue'; const counter = ref(0); function incrementCounter() { counter.value++; } watch(counter, (newValue, oldValue) => { console.log(`计数器从 ${oldValue} 改变为 ${newValue}`); }); </script> <template> <div> <p>{{ counter }}</p> <button @click="incrementCounter">增加</button> </div> </template> ``` 运行开发服务器验证效果： ```bash yarn dev ``` 访问本地地址查看网页界面是否正常加载。 --- ###