分类 前端 下的文章

前言

以前开发PHP,通常会直接在系统上安装各种各样的软件, 如PhpStudy、XAMPP、Mysql等等,虽然使用方便,但是由于每人系统的差异会导致出现很多不一样的问题,且当针对的版本越来越多时,越来越不好用

而使用如Laradock、Homestead、Laragon等开发环境,通常有以下好处,

  • 软件版本切换方便,形成不同的组合,且互相并不冲突
  • 不会污染原生系统
  • 环境统一
  • 快速部署

对比 Homestead、Laradock、Laragon

三款软件都是虚拟机的方式实现,重量级:Homestead > Laradock > Laragon,功能级相同。
Homestead 安装较麻烦,虚拟机的方式运行,VM好用但收费。
Laradock 安装难度简单,沙箱的方式运行(隔离)。但是对于Windows系统 ,需要Win10(因为需要Hyper-V)。
Laragon 安装难度简单,功能相对略少

Homestead

Homestead是一套完善的重量级本地开发环境。实际上是一个打包好各种开发软件和工具的 Vagrant 盒子,有了它,我们不需要再在本地环境安装PHP、Composer、Nginx、Mysql、Redis、Node等工具,我们也完全不需要担心误操作污染操作系统—— 因为 Vagrant 盒子是一次性的,如果出现错误,可以在数分钟内销毁并重新创建该 Vagrant 盒子!

提供了一个完整的、包含自动化 Nginx 配置的 Ubuntu 虚拟机
重量级:是因为安装、配置较麻烦,但功能是最齐全最完善的
安装较麻烦,在使用 Homestead 之前,需要先安装 Virtual Box、VMWare、Parallels 或 Hyper-V (四选一,我们通常选择 VirtualBox,因为只有它是免费的)以及 Vagrant

Laradock

Laradock 是为 Docker 提供的完整 PHP 本地开发环境,和 Homestead 一样提供了一系列打包好(包括配置)的 Docker Image。Laradock 早期专注为 Laravel 打造 Docker 开发环境,因而最早在 Laravel 社区中出名,后来随着影响力的扩大,逐渐被 PHP 社区接纳和采用,目前支持的 PHP 项目除了 Laravel 之外,还有 Symfony、CodeIgniter、WordPress、Drupal 等等
Hyper-V

Laragon

Laragon 具备以下优秀的特性:

  • 自动创建虚拟主机(Virtual Host,Valet 也有这样的功能)
  • 邮件接收和发送
  • 非常方便地切换 PHP、Apache、MySQL 的不同版本
  • 轻松创建框架应用,如 Laravel、Symfony、WordPress、Joomla 等
  • 基于自己的需求为不同的环境设置不同的配置

预装软件

  • Ubuntu 18.04
  • Git
  • PHP 7.3
  • PHP 7.2
  • PHP 7.1
  • PHP 7.0
  • PHP 5.6
  • Nginx
  • MySQL
  • lmm(用于 MySQL 或 MariaDB 数据库快照)
  • SQLite3
  • PostgreSQL
  • Composer
  • Node(With Yarn, Bower, Grunt, and Gulp)
  • Redis
  • Memcached
  • Beanstalkd
  • Mailhog
  • avahi
  • ngrok
  • Xdebug
  • XHprof/Tideways/XHGui
  • wp-cli

可选软件:

  • Apache
  • Blackfire
  • Cassandra
  • Chronograf
  • CouchDB
  • Crystal & Lucky Framework
  • Docker
  • Elasticsearch
  • Gearman
  • Go
  • Grafana
  • InfluxDB
  • MariaDB
  • MinIO
  • MongoDB
  • MySQL 8
  • Neo4j
  • Oh My Zsh
  • Open Resty
  • PM2
  • Python
  • RabbitMQ
  • Solr
  • Webdriver & Laravel Dusk 相关工具

注:如果你使用的是 Windows,需要开启系统的硬件虚拟化(VT-x),这通常可以通过 BIOS 来开启。如果你是在 UEFI 系统上使用 Hyper-V,则需要关闭 Hyper-V 以便可以访问 VT-x。

总结

  • Homestead

    • 相当于使用VirtualBox等软件,启动了一个虚拟机,虚拟机中运行了一个Linux系统,这个系统预装好了很多开发时的软件
    • 不依赖Hyper-V,因此不会与模拟器等冲突
    • 级别过重,运行了一个系统
    • 仅支持本地开发使用
  • Laradock

    • 原理是使用了Win10的Hyper-V,沙河隔离模式
    • 依赖Hyper-V,因此会与模拟器冲突。(可以不依赖Hyper-v,但那样就和Homestead差不多了,但系统可以运行很轻的版本)
    • 级别:中
    • 支持服务器、本地使用(方便迁移、发布)
  • Laragon

    • 类似于PHPStudy,适用于WEB软件等,把一个PHP项目当做一个软件,这个软件内置了所需的环境,再其他电脑上只需要像软件一样启动就可以了
    • 无任何冲突
    • 级别:轻,但不统一
    • 任何Windows电脑都适用,但不大适合大型项目

在学些Vue时,使用Mock Server模拟数据时,出现的问题,这里记录下最后的解决办法。
先说下,我的操作:
1、在项目根目录创建mock目录,再创建mock/mock-server.js,mock-server.js就只做了 app.get ,app.post等请求,加了个文件热加载。

const chokidar = require('chokidar')
const bodyParser = require('body-parser')
const chalk = require('chalk')
const path = require('path')

const mockDir = path.join(process.cwd(), 'mock')

function registerRoutes(app) {
  let mockLastIndex
  const { default: mocks } = require('./index.js')
  for (const mock of mocks) {
    app[mock.type](mock.url, mock.response)
    mockLastIndex = app._router.stack.length
  }
  const mockRoutesLength = Object.keys(mocks).length
  return {
    mockRoutesLength: mockRoutesLength,
    mockStartIndex: mockLastIndex - mockRoutesLength
  }
}

function unregisterRoutes() {
  Object.keys(require.cache).forEach(i => {
    if (i.includes(mockDir)) {
      delete require.cache[require.resolve(i)]
    }
  })
}

module.exports = app => {
  // es6 polyfill
  require('@babel/register')

  // parse app.body
  // https://expressjs.com/en/4x/api.html#req.body
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({
    extended: true
  }))

  const mockRoutes = registerRoutes(app)
  var mockRoutesLength = mockRoutes.mockRoutesLength
  var mockStartIndex = mockRoutes.mockStartIndex
  console.log(chalk.magentaBright(`\n > Mock Server Start success! `))
  // watch files, hot reload mock server
  chokidar.watch(mockDir, {
    ignored: /mock-server/,
    ignoreInitial: true
  }).on('all', (event, path) => {
    if (event === 'change' || event === 'add') {
      try {
        // remove mock routes stack
        app._router.stack.splice(mockStartIndex, mockRoutesLength)

        // clear routes cache
        unregisterRoutes()

        const mockRoutes = registerRoutes(app)
        mockRoutesLength = mockRoutes.mockRoutesLength
        mockStartIndex = mockRoutes.mockStartIndex

        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
      } catch (error) {
        console.log(chalk.redBright(error))
      }
    }
  })
}

2、通过webpack的devServer 启动,并配置代理(将接口请求地址 代理到 mock/)

       const port=9527
      devServer: {
        port: port,
        open: true,
        overlay: {
          warnings: false,
          errors: true
        },
        proxy: { // 代理      
          ['/']: {
            target: `http://127.0.0.1:${port}/mock`,
            changeOrigin: true,
            pathRewrite: {
              ['^' + process.env.VUE_APP_BASE_API]: ''
            }
          }
        },
        after: require('./mock/mock-server.js') // 启动mock-server
      }

遇到过的错误如下:

1、不能代理到/mock,错误提示如下

Proxy error: Could not proxy request /user/info from localhost:2000 to http://127.0.0.1:2000/mock.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

这个问题通常都是Mock Server 启动失败
一般是端口被占用,如果用到 process.env.port || process.env.npm_config_port 变量,注意系统变量中的是否设置过port,如果设置了,最好清除或不适用此变量。
并且记得改过以后一定要重启终端(最好重新打开)。

2、数据返回的不对
这个问题是在能获取到数据,但获取不是想要的数据。通常是因为启动了多个项目,且项目没有设置统一端口(或端口冲突),只需要给定不同的端口即可

3、get请求无效
这个问题是能获取数据,Post请求正常,但get请求时只能获取到一段index.html代码,不是有效数据,
这个一般只需要在请求的header中设置Accept为 application/json, text/plain, */* 就能解决

安装 ESlint

Eslint官方链接
腾讯云的Eslint说明,较好用
eslint-plugin-vue(Vue相关的Eslint)

npm install -g eslint
eslint --init

配置规则

  • root :true, // 以当前目录为根目录,不再向上查找 .eslintrc.js
  • env : 运行的环境
  env:{  
        browser: true,
        node: true,
        commonjs: true,
        es6: true
    }
  • extends: ['eslint:recommended'], // 继承,使用值作为基础配置,可以在rules中覆盖。当前值为eslint推荐的规则

         'extends': [
       'plugin:vue/essential',
       '@vue/standard'
     ]
    
  • parserOptions:JavaScript 选项。

    "parserOptions": {

      // ECMAScript 版本
     "ecmaVersion":6,
     "sourceType":"script",//module
     // 想使用的额外的语言特性:
     "ecmaFeatures":  {
         // 允许在全局作用域下使用 return 语句
         "globalReturn":true,
         // impliedStric
         "impliedStrict":true,
         // 启用 JSX
         "jsx":true
      }
    }
    
  • globals // 全局变量

     globals: { // 允许在代码中使用全局变量
           location: true,
           setTimeout: true
       }
    
  • rules:开启规则和发生错误时报告的等级,规则的错误等级有三种:

       ●  0 或'off':关闭规则。
       ●  1 或'warn':打开规则,并且作为一个警告(并不会导致检查不通过)。
       ●  2 或'error':打开规则,并且作为一个错误(退出码为1,检查不通过)。
    

如下方indent规则说明:
值可以是 0、1、2、'off'、‘warn’、'error'、或者数组,
数组时,[par1,par2,par3],par1对应上面的值,par2是这个选项的值,par3是附带的参数

indent
强制一致的缩进

  • off : 关闭规则
  • tab :以制表符缩进
  • [2,4, {"SwitchCase":1}] : 打开规则,并且作为一个错误,检查不通过。检查规则为 4个空格,

常见规则

accessor-pairs
在对象中强制使用getter/setter 对(不能仅使用setter)

arrow-spacing
箭头符号前后都要空格

"arrow-spacing":[2, {"before": true, "after": true}]

indent
强制一致的缩进,默认为4 个空格

no-console
禁止调用console对象的方法

    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off' //当环境是产品时报错,否则允许调用console

no-debugger
此规则不允许debugger声明

import/first
import 关键字需要放在文件头

spaced-comment
要求注释有空格

space-before-function-paren
函数括号前强制要求有间距

always:(默认)需要一个空格
never:不允许任何空格
 "space-before-function-paren": ["error", "always"], //(默认)需要一个空格
// or
"space-before-function-paren": ["error", {
    "anonymous": "always",
    "named": "always",
    "asyncArrow": "always"
}],

no-cond-assign
条件语句的条件中不允许出现赋值运算符

Vue相关规则

vue/max-attributes-per-line
多个特性的元素应该分多行撰写,每个特性一行

   "vue/max-attributes-per-line": ["error", {  // vue的属性必须每行一个
  "singleline": 1, // 一行显示几个属性
  "multiline": {
    "max": 1,
    "allowFirstLine": false //如果为true,则允许属性与该标记名称位于同一行,max=1,可以代替allowFitstLine
  }
}]