vue-cli

Vue-cli是基于Vue的工具。用于提高开发效率。我这里主要是用于搭建环境。

安装

docker配置

docker compose文件

version: '3'


services:
  node:
    image: "node"
    command: ["/bin/bash"]
    stdin_open: true
    tty: true
    volumes:
      - f:/git_project:/usr/share/nginx/html

安装cnpm(国内用npm会比较慢,所以可以使用cnpm加速)

npm cache clean -f
npm install -g n
n stable
npm install
# 我直接执行这个报错了(cb() Never called),所以需要执行下上面的命令
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack,vue,vue-cli

cnpm install -g @vue/cli

创建vue项目

vue create hello-world

启动

安装 webpack-cli,webpack-dev-server

启动的时候报了 Cannot find module 'webpack-dev-server/client' 错误,先安装下缺失的包

cnpm install --save-dev webpack-dev-server 

composer 学习

之前一直看前端再用npm,看着挺牛b,最近学习java,接触了maven,docker,果然是很牛B。想起来php也有个类似的composer,之前虽然在用,但是一直没有系统的看过一遍,这次仔仔细细看看,哈哈。

安装composer

curl -sS https://getcomposer.org/installer | php

composer文件

文件名 : composer.json
例子如下

{
  "name": "test",
  # require中存放的就是需要安装的第三方包
  "require": {
    # php版本
    "php" : "~7.4",
    "monolog/monolog": "1.0.*",
    # 指定需要的扩展
    "ext-json": "*",
    # 限定PHP库的版本
    "lib-curl": "*"
  }
}

包版本

名称实例描述
确切的版本号1.0.2直接指定确认的版本号
范围>=1.0 >=1.0,<2.0 >=1.0,<1.1|>=1.2通过使用比较操作符可以指定有效的版本范围。有效的运算符:>、>=、<、<=、!=。
你可以定义多个范围,用逗号隔开,这将被视为一个逻辑AND处理。一个管道符号|将作为逻辑OR处理。
AND 的优先级高于 OR。
通配符1.0.*1.0.*>=1.0,<1.1是等效的。
赋值运算符~1.2~1.2相当于>=1.2,<2.0

安装第三方依赖

写composer.json之后就可以安装了,linux执行下面命令即可

composer install

composer.lock - 锁文件

在安装依赖后,Composer会将安装时确切的版本号写入composer.lock文件。这将锁定该项目的特点版本。
这是非常重要的,因为install命令将会检查锁文件是否存在,如果存在,则将直接下载指定的版本。如果不存在,则将读取composer.json文件并创建锁文件。
这意味着,只要有锁文件存在,就算第三方的依赖包发生了更新,执行install命令也不会获得更新。如果需要获取更新,可以执行composer update命令。

在php中使用

composer提供了自动加载的功能,如下

require_once "vendor/autoload.php";

$logger = new \Monolog\Logger('test');
$logger->pushHandler(new Monolog\Handler\StreamHandler('app.log', Monolog\Logger::WARNING));

$logger->addError("123456");

常用命令

命令很多,就列几个感觉会比较常用的

composer install : 安装,优先读取lock文件,没有则读取composer.json文件并生成lock文件
composer update : 读取composer.json文件更新依赖,并更新lock文件,也可以更新指定的包,例 : php composer.phar update vendor/package vendor/package2

composer require : 增加新的依赖到当前目录的composer.json,例 : php composer.phar require vendor/package:2.* vendor/package2:dev-master

composer create-project : 使用现有的包创建一个项目,相当于执行了git clone,常用的场景

  • 你可以快速的部署你的应用。
  • 你可以检出任何资源包,并开发它的补丁。
  • 多人开发项目,可以用它来加快应用的初始化。

docker compose构建本地开发环境

docker compose相关

命令语法 : https://yeasy.gitbooks.io/docker_practice/compose/commands.html
模板文件语法 : https://yeasy.gitbooks.io/docker_practice/compose/compose_file.html

docker compose文件

docker compose会自动创建一个network(默认名称为 : compose配置文件所在目录名_default;比如目录名称为xxx,则network名称为 xxx_default),并将compose中的服务加入到该network中。
可以使用 --project-name (可简写成 -p ) 参数或使用 COMPOSE_PROJECT_NAME 环境变量来自定义networ名称。
在docker compose配置文件中的服务可以直接使用服务名称进行访问,比如在web中可以使用php-fpm:9000访问php-fpm的php-fpm服务,参见下一个部分的nginx配置文件

version: '3'


services:
  web:
    image: nginx:latest
    volumes:
      - f:/git_project:/usr/share/nginx/html
      - f:/docker/php-docker/nginx-conf/conf.d/:/etc/nginx/conf.d/
    ports:
      - '80:80'
    depends_on:
      - php-fpm

  php-fpm:
    image: "scchary/php:1.2"
    volumes:
      - f:/git_project:/usr/share/nginx/html

nginx配置文件

server {
        listen        80;
        server_name  xxx.net;
        root   "/usr/share/nginx/html/xxx.net/frontend/web";
        location / {
        index index.php;
        if ( !-e $request_filename )
        {
            rewrite ^/(.*)$ /index.php?r=$1 last;
        }
        }
        location ~ \.php(.*)$ {
            fastcgi_pass   php-fpm:9000;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            fastcgi_param  PATH_INFO  $fastcgi_path_info;
            fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
}

启动

前台启动,可以看到一些信息,便于调试 : docker-compose -f web-compose.yml up
后台启动 : docker-compose -f web-compose.yml up -d

构建nginx,php的docker镜像-DockerFile 构建

其实就是把安装需要的命令使用Dokerfile的语法搞一遍,
我是需要额外安装几个扩展

Docker文件

DockerFile内容如下

FROM php:5.6.13-fpm
MAINTAINER jin<jinblog@qq.com>

# 安装所需扩展
# mbstring
RUN docker-php-ext-install mbstring
# pdo_mysql
RUN docker-php-ext-install pdo_mysql

# 先更新下apt-get
RUN apt-get update
# gd
RUN apt-get install libpng-dev -y && docker-php-ext-install gd

# imagick
RUN apt-get install -y \
    libmagickwand-dev --no-install-recommends \
    && pecl install imagick \
    && docker-php-ext-enable imagick

# bcmath
RUN docker-php-ext-install bcmath

#  Xdebug
RUN pecl install xdebug-2.5.5
RUN docker-php-ext-enable xdebug
RUN echo 'xdebug.var_display_max_depth = 15\n\
    xdebug.var_display_max_data = 1024\n\
    xdebug.var_display_max_children=128\n\
    xdebug.idekey=PHPSTORM\n\
    xdebug.remote_host=host.docker.internal\n\
    xdebug.remote_enable=on\n\
    xdebug.remote_port = 9001\n\
    xdebug.remote_handler = dbgp\n\
    xdebug.auto_trace = 1\n\
    xdebug.remote_log = /tmp/xdebug.log' >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

EXPOSE 9000

CMD ["php-fpm"]

构建命令

docker build -f DockerFile1-php -t scchary/php:1.2 .

Docker desktop与PHPSTORM整合

设置Docker Desktop

Settings -> General -> Expose daemon on tcp://localhost:2375 without TLS(勾选并重启)

设置xdebug

xdebug.idekey=PHPSTORM
xdebug.remote_host=host.docker.internal
xdebug.remote_enable=on
xdebug.remote_port = 9001
xdebug.remote_handler = dbgp
xdebug.auto_trace = 1
xdebug.remote_log = /tmp/xdebug.log

设置PHP STORM

重启PHP STORM

设置

File -> Settings -> Build, Execution, Development -> Docker -> TCP Socket(没有的可以手动添加一个) -> Engine API URL(填写上tcp://localhost:2375)

CLI interpreter

File -> Settings -> Language & Framework -> PHP -> CLI interpreter(设置成对应的容器)

PHP Storm设置Debug端口

File -> Settings -> Languages & Frameworks -> PHP -> Debug -> Xdebug -> Xdebug Port(Debug的端口,设置为和xdebug.remote_port一样的值)

PHP Storm设置DBGp Proxy

File -> Settings -> Languages & Frameworks -> PHP -> Debug -> DBGp Proxy
IDE key : 服务器开启调试的Key,设置成和xdebug.idekey一样
Host : 服务器的IP,设置成127.0.0.1
Port : Debug的端口,设置为和xdebug.remote_port一样的值

PHP Storm设置Servers

File -> Settings -> Languages & Frameworks -> PHP -> Servers
Name : 随便填
Host : 填网站的域名
Port : 填网站的端口
Debugger : 选择Xdebug

配置项目Debug信息

Run/Debug Configurations
Server : 选择上一步添加的Server