摘要：例如第二步在根目錄下也就是中添加一個(gè)文件夾，文件夾名稱為第一步中二級(jí)域名的前綴，也就是然后將你的項(xiàng)目或者其他項(xiàng)目添加入該文件夾中。
項(xiàng)目初始
在一個(gè)陽光明媚的下午，學(xué)院就業(yè)指導(dǎo)老師讓我們每個(gè)人做一份簡歷，然后打印上交。后回到宿舍，苦苦在網(wǎng)上尋找，未果。因?yàn)椴灰X的模板太丑，好看的模板得花錢...，像我等窮逼，哪里有什么閑錢。于是，果斷下載了個(gè)丑不拉幾的模板，打開word隨便填了填交了上去......
后來良心隱隱作痛，于是打算開發(fā)一款能在線編輯簡歷的webAPP，就隨手將腦海中的想法寫了下來：
接下了就是使用vue-cli初始化項(xiàng)目、下載依賴等常規(guī)操作...
大家可以去我的GitHub地址，查看具體的項(xiàng)目源碼：https://github.com/bjw1234/v_...
歡迎star謝謝各位大佬...
也可以直接點(diǎn)擊該網(wǎng)址運(yùn)行項(xiàng)目：
http://resume.baijiawei.top
我主要把我遇到的一些小問題，以及把配置服務(wù)器的過程記錄下了，以供以后參考學(xué)習(xí)使用...
inline-block元素垂直居中
.content{
display:inline-block;
}
.wrapper:before{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
.content{
vetical-align:middle;
}
自定義組件嵌套
在組建中使用插槽，那么在父組件中可以將內(nèi)容填充到插槽中。
動(dòng)態(tài)設(shè)置圖片的的路徑
通過v-for指令渲染時(shí)，圖片的路徑需要父組件動(dòng)態(tài)傳遞，父組件只是傳過來的圖片的名稱。這時(shí)我們可以這樣做：
![]()
// val是一個(gè)函數(shù)
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;
}
非父子組件之間通信
思路：創(chuàng)建一個(gè)事件中心，相當(dāng)于中繼站，可以用來傳遞事件和接收事件。
// 在main.js中，將這個(gè)事件中繼站添加到Vue的原型鏈上
Vue.protype.$hub = new Vue();
// 在不同組件之間通過這個(gè)中繼站收發(fā)數(shù)據(jù)
// 組件A發(fā)數(shù)據(jù)
this.$hub.$emit("saveAs", "png");
// 組件B接收數(shù)據(jù)
created: function () {
this.$hub.$on("saveAs", (type) => {
// 執(zhí)行對(duì)應(yīng)的操作
});
}
HTML頁面以png、pdf格式保存
使用的第三方模塊
// 下載模塊
npm install jspdf html2canvas --save-dev
具體實(shí)例
// 用戶點(diǎn)擊保存
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，然后獲取圖片數(shù)據(jù)
let imgData = canvas.toDataURL("image/jpeg");
// 初始化pdf，設(shè)置相應(yīng)格式
let doc = new JsPDF("p", "mm", "a4");
// 這里設(shè)置的是a4紙張尺寸
doc.addImage(imgData, "JPEG", 0, 0, 210, 297);
// 輸出保存命名為content的pdf
doc.save("resume.pdf");
});
}
}
ES6模塊 Modules
在模塊中可以使用import和export關(guān)鍵字。
注意： export命令規(guī)定的是對(duì)外的接口，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系。
想要導(dǎo)出模塊的功能有很多方法，其中最簡單的方式是添加export關(guān)鍵字。
// 導(dǎo)出方法
export function a(){
// xxxxx
}
// 導(dǎo)出類
export class Person {
// xxxxx
}
// 報(bào)錯(cuò)
var m = 1;
export m;
// 寫法一
export var m = 1;
// 寫法二
var m = 1;
export {m};
// 寫法三
var n = 1;
export {n as m};
// 這三種寫法都是正確的。
// 報(bào)錯(cuò)
function f() {}
export f;
或者也可以采用這樣的方式：
export {detectCats, Kittydar};
// 此處不需要 `export`關(guān)鍵字
function detectCats(canvas, options) { ... }
class Kittydar { ... }
你可以導(dǎo)出所有的最外層函數(shù)、類以及var、let或const聲明的變量。
在另一個(gè)模塊中導(dǎo)入其他模塊。
import { a, Person } from "xxxx.js";
重命名import和export
導(dǎo)入時(shí)的重命名
// 基本語法
import { 模塊名稱 as 重名后的名稱 } from "xxxx.js";
import {flip as flipOmelet} from "eggs.js";
當(dāng)然，導(dǎo)出時(shí)也可以重命名
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
Default exports
// b.js
export default {
// 其中可以加入任何你想加入的內(nèi)容。
}
// a.js
import b from "b.js";
模塊對(duì)象
import * as cows from "cows.js";
// 當(dāng)你import * 時(shí)，導(dǎo)入的其實(shí)是一個(gè)模塊命名空間對(duì)象，模塊將它的所有屬性都導(dǎo)出了。
// 所以如果“cows”模塊導(dǎo)出一個(gè)名為moon()的函數(shù)，然后用上面這種方法“cows”將其全部導(dǎo)入后，
// 你就可以這樣調(diào)用函數(shù)了：cows.moo()。
聚合模塊
有時(shí)一個(gè)程序包中主模塊的代碼比較多，為了簡化這樣的代碼，
可以用一種統(tǒng)一的方式將其它模塊中的內(nèi)容聚合在一起導(dǎo)出，
可以通過這種簡單的方式將所有所需內(nèi)容導(dǎo)入再導(dǎo)出：
// world-foods.js - 來自世界各地的好東西
// 導(dǎo)入"sri-lanka"并將它導(dǎo)出的內(nèi)容的一部分重新導(dǎo)出
export {Tea, Cinnamon} from "sri-lanka";
// 導(dǎo)入"equatorial-guinea"并將它導(dǎo)出的內(nèi)容的一部分重新導(dǎo)出
export {Coffee, Cocoa} from "equatorial-guinea";
Vue style的scope屬性
當(dāng)
hi
轉(zhuǎn)換結(jié)果：
hi
混用本地和全局樣式
你可以在一個(gè)組件中同時(shí)使用有作用域和無作用域的樣式：
子組件的根元素
使用 scoped 后，父組件的樣式將不會(huì)滲透到子組件中。不過一個(gè)子組件的根節(jié)點(diǎn)會(huì)同時(shí)受其父組件有作用域的 CSS 和子組件有作用域的 CSS 的影響。這樣設(shè)計(jì)是為了讓父組件可以從布局的角度出發(fā)，調(diào)整其子組件根元素的樣式。
深度選擇器
如果你希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符。
有些像 Sass 之類的預(yù)處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 操作符取而代之——這是一個(gè) >>> 的別名，同樣可以正常工作。
CentOS下安裝Nginx并部署Node項(xiàng)目、vue項(xiàng)目
安裝編譯工具及庫文件
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
配置
// 使用默認(rèn)配置
./configure
編譯安裝
make
make install
// 查找安裝路徑
whereis nginx
啟動(dòng)、停止 Nginx
cd /usr/local/nginx/sbin/
./nginx
./nginx -s stop
./nginx -s quit
./nginx -s reload
./nginx -s quit:此方式停止步驟是待nginx進(jìn)程處理任務(wù)完畢進(jìn)行停止。
./nginx -s stop:此方式相當(dāng)于先查出nginx進(jìn)程id再使用kill命令強(qiáng)制殺掉進(jìn)程。
查詢nginx進(jìn)程：
ps aux|grep nginx
重啟 Nginx
1.先停止再啟動(dòng)（推薦）：
對(duì) nginx 進(jìn)行重啟相當(dāng)于先停止再啟動(dòng)，即先執(zhí)行停止命令再執(zhí)行啟動(dòng)命令。
如下：
./nginx -s quit
./nginx
2.重新加載配置文件：
當(dāng) nginx的配置文件 nginx.conf 修改后，要想讓配置生效需要重啟 nginx，
執(zhí)行以下命令即可：
./nginx -s reload
啟動(dòng)成功后，在瀏覽器可以看到這樣的頁面：
如果操作正確的話，按照以上的命令已經(jīng)安裝好了Nginx。
部署Node項(xiàng)目
// 啟動(dòng)項(xiàng)目
pm2 start app.js
// 該項(xiàng)目運(yùn)行在8080端口上
打開 /usr/local/nginx/conf/nginx.conf文件：
添加以下內(nèi)容：
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，那么現(xiàn)在就可以通過自己配置的域名進(jìn)行訪問啦！
ps:
我的頂級(jí)域名：http://baijiawei.top
當(dāng)然為了更好的利用域名資源，也可以使用二級(jí)域名：
例如：
http://blog.baijiawei.top
http://resume.baijiawei.top
Nginx 作為http服務(wù)器訪問靜態(tài)資源
Nginx配置二級(jí)子域名
第一步
去自己域名控制臺(tái)添加解析，這里以添加resume前綴為例：
我用的是阿里云服務(wù)器，在控制面板點(diǎn)擊添加域名，輸入域名名稱點(diǎn)擊確定即可。 例如：(resume.baijiawei.top)
第二步
在nginx根目錄下也就是nginx/html中添加一個(gè)文件夾，文件夾名稱為第一步中二級(jí)域名的前綴，也就是resume,
然后將你的Vue項(xiàng)目或者其他項(xiàng)目添加入該文件夾中。
第三步
添加配置文件
進(jìn)入 /usr/local/nginx/conf/目錄下：
打開nginx.conf配置文件，添加以下內(nèi)容：
# 基于Vue的resume項(xiàng)目
server {
listen 80; # 監(jiān)聽的端口號(hào)
server_name resume.baijiawei.top; # 二級(jí)域名
location / {
root html/resume/dist; # 你的項(xiàng)目地址
index index.html index.htm; # 入口文件
}
error_page 404 /404.html; # 404
error_page 500 502 503 504 /50x.html; # 服務(wù)器端錯(cuò)誤頁面
location = /50x.html { # 頁面地址
root html;
}
}
# 當(dāng)然還有一些其他的配置項(xiàng)，
# 可以依據(jù)需要自行添加。
#
第四步
重新加載nginx配置文件，就可以開開心心在電腦上去訪問自己的項(xiàng)目啦。
./nginx -s reload
大家可以去我的GitHub地址，查看具體的項(xiàng)目源碼：https://github.com/bjw1234/v_...
文章寫到這里差不多就可以結(jié)束啦......
