vue开发可在线编辑简历的webApp

时间 2019-11-06

标签 vue 开发在线编辑简历 webapp 栏目无线繁體版

原文原文链接

项目初始

在一个阳光明媚的下午，学院就业指导老师让咱们每一个人作一份简历，而后打印上交。后回到宿舍，苦苦在网上寻找，未果。由于不要钱的模板太丑，好看的模板得花钱...，像我等穷逼，哪里有什么闲钱。因而，果断下载了个丑不拉几的模板，打开word随便填了填交了上去......css

后来良心隐隐做痛，因而打算开发一款能在线编辑简历的webAPP，就随手将脑海中的想法写了下来：html

接下了就是使用vue-cli初始化项目、下载依赖等常规操做...vue

你们能够去个人GitHub地址，查看具体的项目源码：https://github.com/bjw1234/v_...
欢迎star谢谢各位大佬...nginx

也能够直接点击该网址运行项目：
http://resume.baijiawei.topc++

我主要把我遇到的一些小问题，以及把配置服务器的过程记录下了，以供之后参考学习使用... git

inline-block元素垂直居中

.content{
    display:inline-block;
}

.wrapper:before{
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

.content{
    vetical-align:middle;
}

自定义组件嵌套

在组建中使用<slot></slot>插槽，那么在父组件中能够将内容填充到插槽中。github

动态设置图片的的路径

经过v-for指令渲染时，图片的路径须要父组件动态传递，父组件只是传过来的图片的名称。这时咱们能够这样作：web

<img :src=val( item.icon )>

// val是一个函数
val(icon){
    return require('./'+icon);
}

plceHolder改变其颜色

::-webkit-input-placeholder { /* WebKit browsers */
    color: #fff;
  }

  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
  }

  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff;
  }

  :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #fff;
  }

非父子组件之间通讯

思路：建立一个事件中心，至关于中继站，能够用来传递事件和接收事件。

// 在main.js中，将这个事件中继站添加到Vue的原型链上
Vue.protype.$hub = new Vue();

// 在不一样组件之间经过这个中继站收发数据

// 组件A发数据
 this.$hub.$emit('saveAs', 'png');
 
// 组件B接收数据
    created: function () {     
      this.$hub.$on('saveAs', (type) => {
        // 执行对应的操做
      });
    }

HTML页面以png、pdf格式保存

使用的第三方模块

// 下载模块
npm install jspdf html2canvas --save-dev

具体实例

// 用户点击保存
  saveAsType(type) {
    // png保存
    if (type === 'png') {
      let resume = document.getElementById('pageDefault');
      html2canvas(resume).then(function (canvas) {
        canvas.toBlob(function (blob) {
          fileSaver.saveAs(blob, 'Resume.png');
        });
      });
    }
    // pdf保存
    if (type === 'pdf') {
      let resume = document.getElementById('pageDefault');
      html2canvas(resume).then(function (canvas) {
        // 经过html2canvas将html渲染成canvas，而后获取图片数据
        let imgData = canvas.toDataURL('image/jpeg');

        // 初始化pdf，设置相应格式
        let doc = new JsPDF('p', 'mm', 'a4');

        // 这里设置的是a4纸张尺寸
        doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);

        // 输出保存命名为content的pdf
        doc.save('resume.pdf');
      });
    }
  }

ES6模块 Modules

在模块中可使用import和export关键字。vue-cli

注意： export命令规定的是对外的接口，必须与模块内部的变量创建一一对应关系。npm

想要导出模块的功能有不少方法，其中最简单的方式是添加export关键字。

// 导出方法
export function a(){
    // xxxxx
}

// 导出类
export class Person {
    // xxxxx
}

// 报错
var m = 1;
export m;

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

// 这三种写法都是正确的。


// 报错
function f() {}
export f;

或者也能够采用这样的方式：

export {detectCats, Kittydar};
// 此处不须要 `export`关键字
function detectCats(canvas, options) { ... }
class Kittydar { ... }

你能够导出全部的最外层函数、类以及var、let或const声明的变量。

在另外一个模块中导入其余模块。

import { a, Person } from 'xxxx.js';

重命名import和export

导入时的重命名

// 基本语法
import { 模块名称 as 重名后的名称 } from 'xxxx.js';

import {flip as flipOmelet} from "eggs.js";

固然，导出时也能够重命名

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

Default exports

// b.js
export default {
  // 其中能够加入任何你想加入的内容。
}

// a.js
import b from 'b.js';

模块对象

import * as cows from 'cows.js';

// 当你import * 时，导入的实际上是一个模块命名空间对象，模块将它的全部属性都导出了。
// 因此若是“cows”模块导出一个名为moon()的函数，而后用上面这种方法“cows”将其所有导入后，
// 你就能够这样调用函数了：cows.moo()。

聚合模块

有时一个程序包中主模块的代码比较多，为了简化这样的代码，
能够用一种统一的方式将其它模块中的内容聚合在一块儿导出，
能够经过这种简单的方式将全部所需内容导入再导出：

// world-foods.js - 来自世界各地的好东西

// 导入"sri-lanka"并将它导出的内容的一部分从新导出
export {Tea, Cinnamon} from "sri-lanka";

// 导入"equatorial-guinea"并将它导出的内容的一部分从新导出
export {Coffee, Cocoa} from "equatorial-guinea";

Vue style的scope属性

当<style>标签有scoped属性时，它的css只做用于当前组件中的元素。

有做用域的 CSS

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换结果：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

混用本地和全局样式

你能够在一个组件中同时使用有做用域和无做用域的样式：

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

子组件的根元素

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有做用域的 CSS 和子组件有做用域的 CSS 的影响。这样设计是为了让父组件能够从布局的角度出发，调整其子组件根元素的样式。

深度选择器

若是你但愿 scoped 样式中的一个选择器可以做用得“更深”，例如影响子组件，你可使用 >>> 操做符。

有些像 Sass 之类的预处理器没法正确解析 >>>。这种状况下你可使用 /deep/ 操做符取而代之——这是一个 >>> 的别名，一样能够正常工做。

CentOS下安装Nginx并部署Node项目、vue项目

安装编译工具及库文件

yum -y install make zlib zlib-devel gcc-c++ libtool pcre pcre-devel  openssl openssl-devel

使用wget命令下载 Nginx

wget -c https://nginx.org/download/nginx-1.12.2.tar.gz

解压

tar -zxvf nginx-1.12.2.tar.gz
cd nginx-1.12.2

配置

// 使用默认配置
./configure

编译安装

make
make install

// 查找安装路径
whereis nginx

启动、中止 Nginx

cd /usr/local/nginx/sbin/
./nginx
./nginx -s stop
./nginx -s quit
./nginx -s reload


./nginx -s quit:此方式中止步骤是待nginx进程处理任务完毕进行中止。
./nginx -s stop:此方式至关于先查出nginx进程id再使用kill命令强制杀掉进程。


查询nginx进程：
ps aux|grep nginx

重启 Nginx

1.先中止再启动（推荐）：
对 nginx 进行重启至关于先中止再启动，即先执行中止命令再执行启动命令。
以下：

./nginx -s quit
./nginx

2.从新加载配置文件：
当 nginx的配置文件 nginx.conf 修改后，要想让配置生效须要重启 nginx，
执行如下命令便可：

./nginx -s reload

启动成功后，在浏览器能够看到这样的页面：

若是操做正确的话，按照以上的命令已经安装好了Nginx。

部署Node项目

// 启动项目
pm2 start app.js
// 该项目运行在8080端口上

打开 /usr/local/nginx/conf/nginx.conf文件：

添加如下内容：

server {

      listen     80;
      #域名
      server_name     baijiawei.top www.baijiawei.top;

      location / {
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header Host  $http_host;
          proxy_set_header X-Nginx-Proxy true;
          proxy_set_header Connection "";
          #代理地址
          proxy_pass  http://127.0.0.1:8080;
          root  blog;
      }
}

从新载入配置文件

./nginx -s reload

OK，那么如今就能够经过本身配置的域名进行访问啦！

ps:
个人顶级域名：http://baijiawei.top
固然为了更好的利用域名资源，也可使用二级域名：

例如：
http://blog.baijiawei.top
http://resume.baijiawei.top

Nginx 做为http服务器访问静态资源

Nginx配置二级子域名

第一步

去本身域名控制台添加解析，这里以添加resume前缀为例：

我用的是阿里云服务器，在控制面板点击添加域名，输入域名名称点击肯定便可。例如：(resume.baijiawei.top)

第二步

在nginx根目录下也就是nginx/html中添加一个文件夹，文件夹名称为第一步中二级域名的前缀，也就是resume,
而后将你的Vue项目或者其余项目添加入该文件夹中。

第三步

添加配置文件

进入 /usr/local/nginx/conf/目录下：

打开nginx.conf配置文件，添加如下内容：

#  基于Vue的resume项目    
    server {        
        
        listen       80;             # 监听的端口号 
        server_name  resume.baijiawei.top;   #  二级域名

        location / {
            root   html/resume/dist;     # 你的项目地址
            index  index.html index.htm;   # 入口文件
        }

        error_page  404    /404.html;      # 404

        error_page   500 502 503 504  /50x.html; # 服务器端错误页面
        location = /50x.html {           # 页面地址
            root   html;
        }
    }
    
    # 固然还有一些其余的配置项，
    # 能够依据须要自行添加。
    #

第四步

从新加载nginx配置文件，就能够开开心心在电脑上去访问本身的项目啦。

./nginx -s reload

你们能够去个人GitHub地址，查看具体的项目源码：https://github.com/bjw1234/v_...

文章写到这里差很少就能够结束啦......