个人网站：aijianli.site/ 可以免费在线制作简历，提供PDF下载，方便快捷。
继上篇，用户申请开发者通过之后，可以有开发者界面 。接下来就详细介绍如何将自己的 Vue 简历模板项目接入爱简历开发。
一、新建Vue项目
通过 vue cli 创建 Vue 项目，注意需要选择 Vue2 ，目前仅支持 Vue2
vue create 项目名
二、修改项目配置和 main.js 和 app.vue
2.1 修改vue.config.js
将 vue.config.js 按如下要求修改
原始：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
修改后：
const { defineConfig } = require('@vue/cli-service')
let output = "dist";
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
// where to output built files
outputDir: output,
configureWebpack: {
output: {
// 保证编译后的js文件名不变
filename: './js/[name].js',
}
},
css: {
extract: {
// 保证编译后的css文件名不变
filename: `css/[name].css`,
chunkFilename: `css/[name].css`
},
}
})
2.2 修改main.js
将新建vue项目的main.js如下：
原始：
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
改成：
注意：此处注册模板，开发模式下第一个参数固定为 test-template ，第二个参数为新建 Vue 项目的 App.vue
// import Vue from 'vue'
import App from './App.vue'
// Vue.config.productionTip = false
// 此处注册模板，开发模式下第一个参数固定为 test-template ，第二个参数为新建 Vue 项目的 App.vue
// top-bottom-structure
core.registTemplate("test-template", App)
2.3 修改app.vue
去掉 app.vue 中的 css ，在app.vue中去实现 setConfig 方法.
将如下代码改成。注意，不要在#app中添加任何样式。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<div id="app">
这里是模板的内容
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
methods: {
/**
* 此处实现 setConfig 方法，详细介绍见开发文档
* @param {*} type
* @param {*} Datas
*/
setConfig(type, Datas) {
console.log(type, Datas)
}
},
}
</script>
<style>
</style>
完成以上三步，就能启动新建的 Vue 模板项目，并接入爱简历开发啦！
三、接入爱简历开发
3.1 启动项目，接入到爱简历网站
启动项目后，打开爱简历网站，在 aijianli.site/ 后添加参数 ?debug=端口号，如下项目启动端口号为8080，开发网址为 aijianli.site/admin?debug…
3.2 在开发者界面选中默认简历信息
如下，在开发者界面选中默认简历信息后，已经将本地的 Vue 项目接入爱简历了。
3.3 内容刷新
每次更新内容后，都需要先取消默认简历的勾选状态，在重新勾选。页面内容才能刷新。
完成以上内容，您就成功将您新起的 Vue 简历模板项目接入到 爱简历 网站开发啦~~~
四、项目上传
4.1 在模板管理模块新建模板
当您完成自己的模板开发之后，需要在模板管理中新建一个模板，并将您的模板上传，才可以在简历制作模板去使用模板
此处注意：简历模板地址只能写英文和-，建议项目地址用-分割多个单词。例如：classic-left-right-structure （经典左右结构）
4.2 将您开发的项目使用 npm run build 打包
注意：打包前一定要在 main.js 将注册的模板名改成与模板管理中新建的模板地址保持一致
4.3 将 打包文件（在项目的dist中）的css,js,fonts,img 打包上传
注意：一定要打成 .zip 文件
