19

项目初始

在一个阳光明媚的下午,学院就业指导老师让我们每个人做一份简历,然后打印上交。后回到宿舍,苦苦在网上寻找,未果。因为不要钱的模板太丑,好看的模板得花钱...,像我等穷逼,哪里有什么闲钱。于是,果断下载了个丑不拉几的模板,打开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

在模块中可以使用importexport关键字。

注意: 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_...

文章写到这里差不多就可以结束啦......


五月花开
1.3k 声望878 粉丝

仰望星空,也要脚踏实地。