项目初始
在一个阳光明媚的下午，学院就业指导老师让我们每个人做一份简历，然后打印上交。后回到宿舍，苦苦在网上寻找，未果。因为不要钱的模板太丑，好看的模板得花钱...，像我等穷逼，哪里有什么闲钱。于是，果断下载了个丑不拉几的模板，打开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;
}
自定义组件嵌套
在组建中使用<slot></slot>插槽，那么在父组件中可以将内容填充到插槽中。
动态设置图片的的路径
通过v-for指令渲染时，图片的路径需要父组件动态传递，父组件只是传过来的图片的名称。这时我们可以这样做：
<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关键字。
注意： 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属性
当<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
./nginx2.重新加载配置文件：
当 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://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。