摘要：例如第二步在根目錄下也就是中添加一個文件夾，文件夾名稱為第一步中二級域名的前綴，也就是然后將你的項目或者其他項目添加入該文件夾中。
項目初始
在一個陽光明媚的下午，學院就業指導老師讓我們每個人做一份簡歷，然后打印上交。后回到宿舍，苦苦在網上尋找，未果。因為不要錢的模板太丑，好看的模板得花錢...，像我等窮逼，哪里有什么閑錢。于是，果斷下載了個丑不拉幾的模板，打開word隨便填了填交了上去......
后來良心隱隱作痛，于是打算開發一款能在線編輯簡歷的webAPP，就隨手將腦海中的想法寫了下來：
接下了就是使用vue-cli初始化項目、下載依賴等常規操作...
大家可以去我的GitHub地址，查看具體的項目源碼：https://github.com/bjw1234/v_...
歡迎star謝謝各位大佬...
也可以直接點擊該網址運行項目：
http://resume.baijiawei.top
我主要把我遇到的一些小問題，以及把配置服務器的過程記錄下了，以供以后參考學習使用...
inline-block元素垂直居中
.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);
}
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關鍵字。
注意： 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";
Vue style的scope屬性
當
hi
轉換結果：
hi
混用本地和全局樣式
你可以在一個組件中同時使用有作用域和無作用域的樣式：
子組件的根元素
使用 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_...
文章寫到這里差不多就可以結束啦......
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93979.html
