智能简历平台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> 元素