智能简历平台Plus——前端开发1（框架搭建）

node.js
vue

搭建简历生成器的前端基本框架

1.安装vue
确保已安装Node.js和npm。Vue CLI需要Node.js版本8.9或更高（推荐8.11.0+）

node -v npm -v 

Vue CLI是一个基于Vue.js进行快速开发的完整系统。要全局安装它，请在终端中运行

npm install -g @vue/cli 

2.创建项目
创建一个新的Vue.js项目

vue create my-project 

创建后进入文件夹

cd my-project 

3.创建.vue文件

• 在src->components中建立文件夹，创建.vue文件

echo resume-build.vue 

4.运行

npm run serve 

##具体步骤##
1.根据需求创建组件

• 主要是搭建核心组件ProfileForm.vue，它包含了所有模块的加载代码

2.搭建路由

• 安装vue-router

npm install vue-router 

• 在src下创建router文件夹，文件夹里创建index.js文件，要导入模块组件

import { createRouter, createWebHistory } from 'vue-router'; // 导入 Vue Router 的相关模块 import ProfileForm from '../components/ProfileForm/ProfileForm.vue'; // 导入ProfileForm组件 const routes = [ { path: '/', name: 'Home', component: ProfileForm // 将ProfileForm组件设置为首页 }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }); export default router; 

3.书写根组件app.vue，对使用组件注册

<template> <div id="app"> <!-- 其他内容 --> <ProfileForm /> <!-- 使用ProfileForm组件 --> </div> </template> <script> import ProfileForm from './components/ProfileForm/ProfileForm.vue'; // 导入ProfileForm组件 export default { name: 'App', components: { ProfileForm // 注册ProfileForm组件 } } </script> 

4.书写入口文件main.js

import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus' // 引入element-plus import 'element-plus/theme-chalk/index.css' // 创建 Vue 应用实例，并将路由对象传递给 createApp 函数 const app = createApp(App) // 在应用中使用 ElementUI app.use(ElementPlus); app.use(router) // 使用路由 app.mount('#app') // 挂载到页面上 

简历编辑页组件的代码

• 安装element-plus,用于UI动态渲染，并在ProfileForm.vue文件中引入
• 创建template模板类
• 展示简历助手工具的编辑页面布局和内容。
• 使用Element Plus UI库提供的组件来实现页面的各种功能和交互。
• 支持拖拽模块列表中的组件，根据用户的选择动态展示不同的简历组件。
• 提供导出简历的功能，用户可以选择文件类型和样式进行导出操作。

<script> import { ElButton, ElProgress, ElDialog, ElForm, ElFormItem, ElRadio, ElRadioGroup, ElImage, ElColorPicker } from 'element-plus'; export default { components: { ElButton, ElProgress, ElDialog, ElForm, ElFormItem, ElRadio, ElRadioGroup, ElImage, ElColorPicker }, data() { return { // 在这里放置组件的数据和方法 }; }, methods: { // 在这里放置组件的方法 } }; </script> <template> <div class="edit"> <el-row :gutter="20" style="margin:0;"> <el-col :span="12" :offset="6" style="padding-left:0;padding-right:0;"> <div class="title"> <h4>求职简历编辑</h4> </div> <div class="content"> <!-- 动态加载简历组件模块 --> <component v-for="(app, index) in modules" :key="index" :is="app.module" v-show="app.show" v-bind:ref="app.ref" v-bind="app.data"></component> </div> </el-col> <el-col :span="5" :offset="1" style="padding-left:0;padding-right:0;position:relative;"> <div class="oprate-box"> <el-progress type="dashboard" :percentage="completion_progress" :color="progress_colors" :width="60"></el-progress> <div class="module_list"> <div class="module" v-for="(app, index) in modules" :key="index" draggable="true" @dragstart="handleDragStart($event, index)" @dragover.prevent="handleDragOver($event, index)" @dragenter="handleDragEnter($event, index)" @dragend="handleDragEnd($event, index)"> <el-checkbox v-model="app.show" :disabled="app.module === 'BaseInfo' || app.module === 'PersonalIntroduction' || app.module === 'JobIntension'"></el-checkbox><span class="module_name">{{ app.label }}</span> <div v-if="app.module === 'BaseInfo' || app.module === 'PersonalIntroduction' || app.module === 'JobIntension'" class="mengceng"></div> </div> </div> <div class="save"> <el-button v-if="id !== undefined" type="danger" size="small" @click="beforeDel()">删除</el-button> <el-button v-if="id !== undefined" type="success" size="small" @click="dialogFormVisible = true">导出</el-button> <el-button type="primary" size="small" @click="beforeSave()">保存</el-button> </div> </div> </el-col> </el-row> <el-dialog title="导出简历" @close="handleClose" v-model="dialogFormVisible" style="text-align:left;"> <el-form :model="exportForm" ref="exportForm"> <el-form-item label="文件的类型"> <el-radio-group v-model="exportForm.file_type"> <el-radio label="doc"></el-radio> <el-radio label="pdf"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="样式选择"> <div class="style_list"> <el-radio-group v-model="exportForm.style_index"> <div class="style_one" v-for="(item, index) in style_list" :key="index"> <div class="demo-image__preview"> <el-image style="width: 100px; height: 120px" :src="item.src" :preview-src-list="srcList"> </el-image> </div> <div class="style_check"> <el-radio :label="index"><span></span></el-radio> </div> </div> <div class="style_one"> <div class="my_style"> <el-color-picker v-model="my_style_color" :predefine="predefineColors"> </el-color-picker> </div> <div class="style_check"> <el-radio label="-1"><span style="font-size:12px;font-weight:500;">自定义</span></el-radio> </div> </div> </el-radio-group> </div> </el-form-item> </el-form> <!-- 使用 v-slot 指令替换 slot 属性 --> <template v-slot:footer> <el-button size="small" @click="dialogFormVisible = false">取 消</el-button> <el-button size="small" type="primary" @click="beforeExport()">导出</el-button> </template> </el-dialog> </div> </template> 

1.使用Vue3不能使用element-ui，而要使用element-plus，element-plus在入口文件main.js只需表明用法，
app.use(ElementPlus);即可，不需要额外注册，在组件中要引入element-plus
2注意更新的组件用法

 - '.sync'修饰符在'v-bind'指令上被弃用，应该改用'v-model:propName'。 - 'slot'属性已经被弃用，需要将其替换为 <slot> 元素 

原文链接：https://blog.csdn.net/ltfxyy/article/details/138623749?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171851494816800178586357%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171851494816800178586357&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-16-138623749-null-null.nonecase&utm_term=AI%E7%AE%80%E5%8E%86