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

摘要：例如第二步在根目录下也就是中添加一个文件夹，文件夹名称为第一步中二级域名的前缀，也就是然后将你的项目或者其他项目添加入该文件夹中。

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

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

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

大家可以去我的GitHub地址，查看具体的项目源码：https://github.com/bjw1234/v_...
欢迎star谢谢各位大佬...

也可以直接点击该网址运行项目：
http://resume.baijiawei.top

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

.content{
    display:inline-block;
}

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

.content{
    vetical-align:middle;
}

在组建中使用插槽，那么在父组件中可以将内容填充到插槽中。

通过v-for指令渲染时，图片的路径需要父组件动态传递，父组件只是传过来的图片的名称。这时我们可以这样做：

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

  ::-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) => {
        // 执行对应的操作
      });
    }

使用的第三方模块

// 下载模块
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");
      });
    }
  }

在模块中可以使用import和export关键字。

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

想要导出模块的功能有很多方法，其中最简单的方式是添加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";

当

转换结果：

你可以在一个组件中同时使用有作用域和无作用域的样式：

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

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。

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

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

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

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

1.先停止再启动（推荐）：
对 nginx 进行重启相当于先停止再启动，即先执行停止命令再执行启动命令。
如下：

./nginx -s quit
./nginx

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

./nginx -s reload

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

如果操作正确的话，按照以上的命令已经安装好了Nginx。

// 启动项目
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配置二级子域名

去自己域名控制台添加解析，这里以添加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_...

文章写到这里差不多就可以结束啦......