项目初始
在一个阳光明媚的下午,学院就业指导老师让我们每个人做一份简历,然后打印上交。后回到宿舍,苦苦在网上寻找,未果。因为不要钱的模板太丑,好看的模板得花钱...,像我等穷逼,哪里有什么闲钱。于是,果断下载了个丑不拉几的模板,打开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
./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://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。