Vue制作静态页面简历并发布到七牛云上

一般情况下，我们使用word可以写出漂亮的简历。但是我们是程序员，就应该用程序员的方式来做–使用网页写简历。当然，网页简历的方式就很多了，这里我们就用vue来搞定这个事，因为它灵活、高效、方便。

Vue插件和UI框架比较丰富，我们这里就借助elementui来帮助我们快速完成网页.大家可以先去Element官方查看相应的文档。

ElementUI快速上手

安装ElementUI和相应的插件

cnpm i element-ui -S
cnpm install babel-plugin-component -D

main.js文件引入ElementUI:

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);  # 完整引入
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在.babelrc配置babel-plugin-component，我们借助 babel-plugin-component来实现按需引入，以达到减小项目体积的目的

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]]
}

現在我們就可以註冊我們需要的組件，

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

我新建了几个组件， 结构如下：

将我们的组件注册到router中:

import About from '@/components/about/About'
import Skill from '@/components/skill/Index'
import Index from '@/components/index/Index'
import His from '@/components/history/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path:'/about',
      name:'About',
      component:About
    },{
      path:'/skill',
      name:'skill',
      component:Skill
    },{
      path:'/his',
      name:'his',
      component:His
    }
  ]
})

在首页用到了Element 的layout布局，App.vue做了如下修改:

<template>
  <div id="app">
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Footer from "@/components/footer/Footer";
import Header from "@/components/header/Header";
export default {
  components: {
    Footer,
    Header
  },
  name: "App"
};
</script>

在Header.vue中用到了el-menu：

<template>
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    :router="true"
    mode="horizontal"
 >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/about">个人简介</el-menu-item>
      <el-menu-item index="/skill">个人技能</el-menu-item>
      <el-menu-item index="/his">工作经历</el-menu-item>
    </el-menu>
</template>
<script>
export default {
  name: 'Header',
  data () {
    return {
      activeIndex: '/'
    }
  }
}
</script>

这里的组件代码来源于Vue+Element实现网页版个人简历系统.
接下来编译成静态页面:

npm run build

我之前有把博客上传到七牛云的文章，大家可以去看看。这里我只简单的走个流程:

qshell qupload2 --overwrite=true --rescan-local=true --src-dir=E:\vue\myresume\dist --bucket=eyiadminresume

之前也有说到将命令写入到package.json中:

"build": "node build/build.js & qshell qupload2 --overwrite=true --rescan-local=true --src-dir=E:/vue/myresume/dist --bucket=eyiadminresume"

这样在执行npm run build的时候，会先执行node build/build.js然后会执行qshell qupload2上传到七牛云.关于qshell的详细教程请访问https://github.com/qiniu/qshell。
上传完成后，我们就需要解析到我们的域名上resume.52fx.biz

个人简历我会不定期更新，如有疑问可以加我QQ详聊188781475