BelieveYou 发布的文章

前言

官方文档
参考了PHP 开发环境安装配置:Win10+Docker+Laradock(上篇)
Laradock 是Laravel + docker 的缩写,最早是为Laravel打造的,现在已成为广泛使用的一套基于Docker的PHP开发环境,提供了多个预先配置和打包的Docker镜像。
类似的选择有 Homestead、Laragon.
安装准备:

  • Win10 x64 专业版 (Win10 才用Hyper-V,因此不支持虚拟机版Win10安装)
  • **BIOS 开启 虚拟化(Virtualization is enabled)
  • CPU支持SLAT功能
  • 请退出360 安全卫士等软件
  • Docker 安装程序 链接:https://pan.baidu.com/s/1loaiILSMxtKzuMco6crKtA 提取码:n7en

<span style='color:red'>注意,安装前请确认没有安装过虚拟机软件,如VMware Workstation 、Virtual Box。如果安装过一定要将其卸载,否则可能会出现冲突,因为Win10 安装Docker时会启用Win10自带的Hyper-V虚拟机

Win10 中安装 Docker

  1. 运行下载好的 Docker Desktop Installer.exe安装程序,按下图选择。
    Add shortcut to desktop 是指添加桌面快捷方式
    Use Windows containers instead... 是指使用Windows容器而不是Linux容器(可以在安装后更改),不要勾选,因为Laradock需要Linux安装
    7P(((TQDR[L`VL7B$~$)C~V.png
  2. 正在安装

正在安装.png

  1. 安装完成,点击 Close and log out(关闭并注销),会注销系统。

    安装完成.png

  1. 重新登录账户后,会弹出如下提示,点击OK!意思是Hyper-V未启用,Docker不能正常工作,重启启动Hyper-V!

    4.png

  2. 重启成功后,通知栏会出现一个Docker的图标,显示Docker desktop is runing,说明 Docker已成功运行。
    右键Settings->Advanced,配置虚拟机的信息(CPU,内存)

在学些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
  }
}]