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;
        }
    }
    
    # 固然還有一些其餘的配置項，
    # 能夠依據須要自行添加。
    #