vue create Vue3 on 2020 September + Typescript

Vue 3

woirking on C:\d\lab\flaskw3html\19.vuejs\06.app

reference https://www.jianshu.com/p/e817141b1c8d

vue create vue3

Manual (not vue 2 default or vue 3 default)

On top of default Babel and Linter Formatter, add Router and Vuex

3.x (Preview) not 2.x

History mode n

linter choose Prettier (not error prevention only nor Airbnb nor Standard)

Lint on save (not fix on commit)

dedicated config files (not package.json)

顺便安装bootstra-vue

npm install bootstrap bootstrap-vue

now we can

cd vue3

npm run serve

Optionally modify package.json to add --port 8090 so that

"serve": "vue-cli-service serve -- port 8090",

beside package.json, create "npm.run.serve.bat"

start http://localhost:8090

npm run serve

main.js

import { createApp, Vue } from "vue";

import { BootstrapVue, IconsPlugin } from "bootstrap-vue";

Vue.use(BootstrapVue);

Vue.use(IconsPlugin);

import "bootstrap/dist/css/bootstrap.css";

import "bootstrap-vue/dist/bootstrap-vue.css";

https://stackoverflow.com/questions/63570340/how-to-use-vue-3-add-plugin-boostrap-vue

Bootstrap vue does not support Vue 3 on 2020 September yet

Conclusion:

Only Bootstrap-Vue does not work with Vue3. Others work include:

.env.development
import axios from "axios";
fetch("https://api.coindesk.com/v1/bpi/currentprice.json")
import _ from "lodash";
import Papa from "papaparse";
<script scoped>
import VuexPersist from "vuex-persist";
plugins: [vuexLocal.plugin]

Vuex is 99% the same except

import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store()

becomes

import { createStore } from "vuex";
export default createStore()

How about Typescript?

vue create vue3

keep default Babel, select TypeScript VueX Router

3.x

No for class-style component syntax

Yes for Babel alongside TypeScript

No for router history mode

最重要的axios原本封装之后不知道如何import去另外一个VueX的index.ts!不能使用

asdsad

End

NodeJS ExpressJS Request Content from Axios

I have a VueJS 2 axios api call

axios.post("login", { username: this.username, password: this.password });

The NodeJS ExpressJS code is

app.post('/login', function (req, res) {

    console.log('req', req);

});

On the console

req IncomingMessage {

  _readableState: ReadableState {

    objectMode: false,

    highWaterMark: 16384,

    buffer: BufferList { head: null, tail: null, length: 0 },

    length: 0,

    pipes: null,

    pipesCount: 0,

    flowing: true,

    ended: true,

    endEmitted: true,

    reading: false,

    sync: false,

    needReadable: false,

    emittedReadable: false,

    readableListening: false,

    resumeScheduled: false,

    paused: false,

    emitClose: true,

    autoDestroy: false,

    destroyed: false,

    defaultEncoding: 'utf8',

    awaitDrain: 0,

    readingMore: false,

    decoder: null,

    encoding: null

  },

  readable: false,

  _events: [Object: null prototype] {

    end: [Function: resetHeadersTimeoutOnReqEnd]

  },

  _eventsCount: 1,

  _maxListeners: undefined,

  socket: Socket {

    connecting: false,

    _hadError: false,

    _parent: null,

    _host: null,

    _readableState: ReadableState {

      objectMode: false,

      highWaterMark: 16384,

      buffer: BufferList { head: null, tail: null, length: 0 },

      length: 0,

      pipes: null,

      pipesCount: 0,

      flowing: true,

      ended: false,

      endEmitted: false,

      reading: true,

      sync: false,

      needReadable: true,

      emittedReadable: false,

      readableListening: false,

      resumeScheduled: false,

      paused: false,

      emitClose: false,

      autoDestroy: false,

      destroyed: false,

      defaultEncoding: 'utf8',

      awaitDrain: 0,

      readingMore: false,

      decoder: null,

      encoding: null

    },

    readable: true,

    _events: [Object: null prototype] {

      end: [Array],

      timeout: [Function: socketOnTimeout],

      data: [Function: bound socketOnData],

      error: [Function: socketOnError],

      close: [Array],

      drain: [Function: bound socketOnDrain],

      resume: [Function: onSocketResume],

      pause: [Function: onSocketPause]

    },

    _eventsCount: 8,

    _maxListeners: undefined,

    _writableState: WritableState {

      objectMode: false,

      highWaterMark: 16384,

      finalCalled: false,

      needDrain: false,

      ending: false,

      ended: false,

      finished: false,

      destroyed: false,

      decodeStrings: false,

      defaultEncoding: 'utf8',

      length: 0,

      writing: false,

      corked: 0,

      sync: false,

      bufferProcessing: false,

      onwrite: [Function: bound onwrite],

      writecb: null,

      writelen: 0,

      afterWriteTickInfo: null,

      bufferedRequest: null,

      lastBufferedRequest: null,

      pendingcb: 0,

      prefinished: false,

      errorEmitted: false,

      emitClose: false,

      autoDestroy: false,

      bufferedRequestCount: 0,

      corkedRequestsFree: [Object]

    },

    writable: true,

    allowHalfOpen: true,

    _sockname: null,

    _pendingData: null,

    _pendingEncoding: '',

    server: Server {

      _events: [Object: null prototype],

      _eventsCount: 2,

      _maxListeners: undefined,

      _connections: 4,

      _handle: [TCP],

      _usingWorkers: false,

      _workers: [],

      _unref: false,

      allowHalfOpen: true,

      pauseOnConnect: false,

      httpAllowHalfOpen: false,

      timeout: 120000,

      keepAliveTimeout: 5000,

      maxHeadersCount: null,

      headersTimeout: 40000,

      _connectionKey: '4:0.0.0.0:20230',

      [Symbol(IncomingMessage)]: [Function: IncomingMessage],

      [Symbol(ServerResponse)]: [Function: ServerResponse],

      [Symbol(asyncId)]: 13

    },

    _server: Server {

      _events: [Object: null prototype],

      _eventsCount: 2,

      _maxListeners: undefined,

      _connections: 4,

      _handle: [TCP],

      _usingWorkers: false,

      _workers: [],

      _unref: false,

      allowHalfOpen: true,

      pauseOnConnect: false,

      httpAllowHalfOpen: false,

      timeout: 120000,

      keepAliveTimeout: 5000,

      maxHeadersCount: null,

      headersTimeout: 40000,

      _connectionKey: '4:0.0.0.0:20230',

      [Symbol(IncomingMessage)]: [Function: IncomingMessage],

      [Symbol(ServerResponse)]: [Function: ServerResponse],

      [Symbol(asyncId)]: 13

    },

    timeout: 120000,

    parser: HTTPParser {

      '0': [Function: parserOnHeaders],

      '1': [Function: parserOnHeadersComplete],

      '2': [Function: parserOnBody],

      '3': [Function: parserOnMessageComplete],

      '4': [Function: bound onParserExecute],

      _headers: [],

      _url: '',

      socket: [Circular],

      incoming: [Circular],

      outgoing: null,

      maxHeaderPairs: 2000,

      _consumed: true,

      onIncoming: [Function: bound parserOnIncoming],

      parsingHeadersStart: 1600144170273

    },

    on: [Function: socketListenerWrap],

    addListener: [Function: socketListenerWrap],

    prependListener: [Function: socketListenerWrap],

    _paused: false,

    _httpMessage: ServerResponse {

      _events: [Object: null prototype],

      _eventsCount: 1,

      _maxListeners: undefined,

      outputData: [],

      outputSize: 0,

      writable: true,

      _last: false,

      chunkedEncoding: false,

      shouldKeepAlive: true,

      useChunkedEncodingByDefault: true,

      sendDate: true,

      _removedConnection: false,

      _removedContLen: false,

      _removedTE: false,

      _contentLength: null,

      _hasBody: true,

      _trailer: '',

      finished: false,

      _headerSent: false,

      socket: [Circular],

      connection: [Circular],

      _header: null,

      _onPendingData: [Function: bound updateOutgoingData],

      _sent100: false,

      _expect_continue: false,

      req: [Circular],

      locals: [Object: null prototype] {},

      writeHead: [Function: writeHead],

      end: [Function: end],

      [Symbol(kNeedDrain)]: false,

      [Symbol(isCorked)]: false,

      [Symbol(kOutHeaders)]: [Object: null prototype]

    },

    _peername: { address: '127.0.0.1', family: 'IPv4', port: 51058 },

    [Symbol(asyncId)]: 1341,

    [Symbol(kHandle)]: TCP {

      reading: true,

      onconnection: null,

      _consumed: true,

      [Symbol(owner)]: [Circular]

    },

    [Symbol(lastWriteQueueSize)]: 0,

    [Symbol(timeout)]: Timeout {

      _idleTimeout: 120000,

      _idlePrev: [TimersList],

      _idleNext: [Timeout],

      _idleStart: 32355,

      _onTimeout: [Function: bound ],

      _timerArgs: undefined,

      _repeat: null,

      _destroyed: false,

      [Symbol(refed)]: false,

      [Symbol(asyncId)]: 1376,

      [Symbol(triggerId)]: 1343

    },

    [Symbol(kBuffer)]: null,

    [Symbol(kBufferCb)]: null,

    [Symbol(kBufferGen)]: null,

    [Symbol(kBytesRead)]: 0,

    [Symbol(kBytesWritten)]: 0

  },

  connection: Socket {

    connecting: false,

    _hadError: false,

    _parent: null,

    _host: null,

    _readableState: ReadableState {

      objectMode: false,

      highWaterMark: 16384,

      buffer: BufferList { head: null, tail: null, length: 0 },

      length: 0,

      pipes: null,

      pipesCount: 0,

      flowing: true,

      ended: false,

      endEmitted: false,

      reading: true,

      sync: false,

      needReadable: true,

      emittedReadable: false,

      readableListening: false,

      resumeScheduled: false,

      paused: false,

      emitClose: false,

      autoDestroy: false,

      destroyed: false,

      defaultEncoding: 'utf8',

      awaitDrain: 0,

      readingMore: false,

      decoder: null,

      encoding: null

    },

    readable: true,

    _events: [Object: null prototype] {

      end: [Array],

      timeout: [Function: socketOnTimeout],

      data: [Function: bound socketOnData],

      error: [Function: socketOnError],

      close: [Array],

      drain: [Function: bound socketOnDrain],

      resume: [Function: onSocketResume],

      pause: [Function: onSocketPause]

    },

    _eventsCount: 8,

    _maxListeners: undefined,

    _writableState: WritableState {

      objectMode: false,

      highWaterMark: 16384,

      finalCalled: false,

      needDrain: false,

      ending: false,

      ended: false,

      finished: false,

      destroyed: false,

      decodeStrings: false,

      defaultEncoding: 'utf8',

      length: 0,

      writing: false,

      corked: 0,

      sync: false,

      bufferProcessing: false,

      onwrite: [Function: bound onwrite],

      writecb: null,

      writelen: 0,

      afterWriteTickInfo: null,

      bufferedRequest: null,

      lastBufferedRequest: null,

      pendingcb: 0,

      prefinished: false,

      errorEmitted: false,

      emitClose: false,

      autoDestroy: false,

      bufferedRequestCount: 0,

      corkedRequestsFree: [Object]

    },

    writable: true,

    allowHalfOpen: true,

    _sockname: null,

    _pendingData: null,

    _pendingEncoding: '',

    server: Server {

      _events: [Object: null prototype],

      _eventsCount: 2,

      _maxListeners: undefined,

      _connections: 4,

      _handle: [TCP],

      _usingWorkers: false,

      _workers: [],

      _unref: false,

      allowHalfOpen: true,

      pauseOnConnect: false,

      httpAllowHalfOpen: false,

      timeout: 120000,

      keepAliveTimeout: 5000,

      maxHeadersCount: null,

      headersTimeout: 40000,

      _connectionKey: '4:0.0.0.0:20230',

      [Symbol(IncomingMessage)]: [Function: IncomingMessage],

      [Symbol(ServerResponse)]: [Function: ServerResponse],

      [Symbol(asyncId)]: 13

    },

    _server: Server {

      _events: [Object: null prototype],

      _eventsCount: 2,

      _maxListeners: undefined,

      _connections: 4,

      _handle: [TCP],

      _usingWorkers: false,

      _workers: [],

      _unref: false,

      allowHalfOpen: true,

      pauseOnConnect: false,

      httpAllowHalfOpen: false,

      timeout: 120000,

      keepAliveTimeout: 5000,

      maxHeadersCount: null,

      headersTimeout: 40000,

      _connectionKey: '4:0.0.0.0:20230',

      [Symbol(IncomingMessage)]: [Function: IncomingMessage],

      [Symbol(ServerResponse)]: [Function: ServerResponse],

      [Symbol(asyncId)]: 13

    },

    timeout: 120000,

    parser: HTTPParser {

      '0': [Function: parserOnHeaders],

      '1': [Function: parserOnHeadersComplete],

      '2': [Function: parserOnBody],

      '3': [Function: parserOnMessageComplete],

      '4': [Function: bound onParserExecute],

      _headers: [],

      _url: '',

      socket: [Circular],

      incoming: [Circular],

      outgoing: null,

      maxHeaderPairs: 2000,

      _consumed: true,

      onIncoming: [Function: bound parserOnIncoming],

      parsingHeadersStart: 1600144170273

    },

    on: [Function: socketListenerWrap],

    addListener: [Function: socketListenerWrap],

    prependListener: [Function: socketListenerWrap],

    _paused: false,

    _httpMessage: ServerResponse {

      _events: [Object: null prototype],

      _eventsCount: 1,

      _maxListeners: undefined,

      outputData: [],

      outputSize: 0,

      writable: true,

      _last: false,

      chunkedEncoding: false,

      shouldKeepAlive: true,

      useChunkedEncodingByDefault: true,

      sendDate: true,

      _removedConnection: false,

      _removedContLen: false,

      _removedTE: false,

      _contentLength: null,

      _hasBody: true,

      _trailer: '',

      finished: false,

      _headerSent: false,

      socket: [Circular],

      connection: [Circular],

      _header: null,

      _onPendingData: [Function: bound updateOutgoingData],

      _sent100: false,

      _expect_continue: false,

      req: [Circular],

      locals: [Object: null prototype] {},

      writeHead: [Function: writeHead],

      end: [Function: end],

      [Symbol(kNeedDrain)]: false,

      [Symbol(isCorked)]: false,

      [Symbol(kOutHeaders)]: [Object: null prototype]

    },

    _peername: { address: '127.0.0.1', family: 'IPv4', port: 51058 },

    [Symbol(asyncId)]: 1341,

    [Symbol(kHandle)]: TCP {

      reading: true,

      onconnection: null,

      _consumed: true,

      [Symbol(owner)]: [Circular]

    },

    [Symbol(lastWriteQueueSize)]: 0,

    [Symbol(timeout)]: Timeout {

      _idleTimeout: 120000,

      _idlePrev: [TimersList],

      _idleNext: [Timeout],

      _idleStart: 32355,

      _onTimeout: [Function: bound ],

      _timerArgs: undefined,

      _repeat: null,

      _destroyed: false,

      [Symbol(refed)]: false,

      [Symbol(asyncId)]: 1376,

      [Symbol(triggerId)]: 1343

    },

    [Symbol(kBuffer)]: null,

    [Symbol(kBufferCb)]: null,

    [Symbol(kBufferGen)]: null,

    [Symbol(kBytesRead)]: 0,

    [Symbol(kBytesWritten)]: 0

  },

  httpVersionMajor: 1,

  httpVersionMinor: 1,

  httpVersion: '1.1',

  complete: true,

  headers: {

    host: 'localhost:20230',

    connection: 'keep-alive',

    'content-length': '32',

    accept: 'application/json, text/plain, */*',

    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102

 Safari/537.36',

    'content-type': 'application/json;charset=UTF-8',

    origin: 'http://localhost:20727',

    'sec-fetch-site': 'same-site',

    'sec-fetch-mode': 'cors',

    'sec-fetch-dest': 'empty',

    referer: 'http://localhost:20727/',

    'accept-encoding': 'gzip, deflate, br',

    'accept-language': 'zh-CN,zh;q=0.9',

    cookie: 'connect.sid=s%3A6D00jCBjQVjI9oxdDVaixKe_59saqDp1.QktqxPSzbyr6uflfUP7pxzAV18FaV7Cj3b20db0jlHI'

  },

  rawHeaders: [

    'Host',

    'localhost:20230',

    'Connection',

    'keep-alive',

    'Content-Length',

    '32',

    'Accept',

    'application/json, text/plain, */*',

    'User-Agent',

    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36

',

    'Content-Type',

    'application/json;charset=UTF-8',

    'Origin',

    'http://localhost:20727',

    'Sec-Fetch-Site',

    'same-site',

    'Sec-Fetch-Mode',

    'cors',

    'Sec-Fetch-Dest',

    'empty',

    'Referer',

    'http://localhost:20727/',

    'Accept-Encoding',

    'gzip, deflate, br',

    'Accept-Language',

    'zh-CN,zh;q=0.9',

    'Cookie',

    'connect.sid=s%3A6D00jCBjQVjI9oxdDVaixKe_59saqDp1.QktqxPSzbyr6uflfUP7pxzAV18FaV7Cj3b20db0jlHI'

  ],

  trailers: {},

  rawTrailers: [],

  aborted: false,

  upgrade: false,

  url: '/login',

  method: 'POST',

  statusCode: null,

  statusMessage: null,

  client: Socket {

    connecting: false,

    _hadError: false,

    _parent: null,

    _host: null,

    _readableState: ReadableState {

      objectMode: false,

      highWaterMark: 16384,

      buffer: BufferList { head: null, tail: null, length: 0 },

      length: 0,

      pipes: null,

      pipesCount: 0,

      flowing: true,

      ended: false,

      endEmitted: false,

      reading: true,

      sync: false,

      needReadable: true,

      emittedReadable: false,

      readableListening: false,

      resumeScheduled: false,

      paused: false,

      emitClose: false,

      autoDestroy: false,

      destroyed: false,

      defaultEncoding: 'utf8',

      awaitDrain: 0,

      readingMore: false,

      decoder: null,

      encoding: null

    },

    readable: true,

    _events: [Object: null prototype] {

      end: [Array],

      timeout: [Function: socketOnTimeout],

      data: [Function: bound socketOnData],

      error: [Function: socketOnError],

      close: [Array],

      drain: [Function: bound socketOnDrain],

      resume: [Function: onSocketResume],

      pause: [Function: onSocketPause]

    },

    _eventsCount: 8,

    _maxListeners: undefined,

    _writableState: WritableState {

      objectMode: false,

      highWaterMark: 16384,

      finalCalled: false,

      needDrain: false,

      ending: false,

      ended: false,

      finished: false,

      destroyed: false,

      decodeStrings: false,

      defaultEncoding: 'utf8',

      length: 0,

      writing: false,

      corked: 0,

      sync: false,

      bufferProcessing: false,

      onwrite: [Function: bound onwrite],

      writecb: null,

      writelen: 0,

      afterWriteTickInfo: null,

      bufferedRequest: null,

      lastBufferedRequest: null,

      pendingcb: 0,

      prefinished: false,

      errorEmitted: false,

      emitClose: false,

      autoDestroy: false,

      bufferedRequestCount: 0,

      corkedRequestsFree: [Object]

    },

    writable: true,

    allowHalfOpen: true,

    _sockname: null,

    _pendingData: null,

    _pendingEncoding: '',

    server: Server {

      _events: [Object: null prototype],

      _eventsCount: 2,

      _maxListeners: undefined,

      _connections: 4,

      _handle: [TCP],

      _usingWorkers: false,

      _workers: [],

      _unref: false,

      allowHalfOpen: true,

      pauseOnConnect: false,

      httpAllowHalfOpen: false,

      timeout: 120000,

      keepAliveTimeout: 5000,

      maxHeadersCount: null,

      headersTimeout: 40000,

      _connectionKey: '4:0.0.0.0:20230',

      [Symbol(IncomingMessage)]: [Function: IncomingMessage],

      [Symbol(ServerResponse)]: [Function: ServerResponse],

      [Symbol(asyncId)]: 13

    },

    _server: Server {

      _events: [Object: null prototype],

      _eventsCount: 2,

      _maxListeners: undefined,

      _connections: 4,

      _handle: [TCP],

      _usingWorkers: false,

      _workers: [],

      _unref: false,

      allowHalfOpen: true,

      pauseOnConnect: false,

      httpAllowHalfOpen: false,

      timeout: 120000,

      keepAliveTimeout: 5000,

      maxHeadersCount: null,

      headersTimeout: 40000,

      _connectionKey: '4:0.0.0.0:20230',

      [Symbol(IncomingMessage)]: [Function: IncomingMessage],

      [Symbol(ServerResponse)]: [Function: ServerResponse],

      [Symbol(asyncId)]: 13

    },

    timeout: 120000,

    parser: HTTPParser {

      '0': [Function: parserOnHeaders],

      '1': [Function: parserOnHeadersComplete],

      '2': [Function: parserOnBody],

      '3': [Function: parserOnMessageComplete],

      '4': [Function: bound onParserExecute],

      _headers: [],

      _url: '',

      socket: [Circular],

      incoming: [Circular],

      outgoing: null,

      maxHeaderPairs: 2000,

      _consumed: true,

      onIncoming: [Function: bound parserOnIncoming],

      parsingHeadersStart: 1600144170273

    },

    on: [Function: socketListenerWrap],

    addListener: [Function: socketListenerWrap],

    prependListener: [Function: socketListenerWrap],

    _paused: false,

    _httpMessage: ServerResponse {

      _events: [Object: null prototype],

      _eventsCount: 1,

      _maxListeners: undefined,

      outputData: [],

      outputSize: 0,

      writable: true,

      _last: false,

      chunkedEncoding: false,

      shouldKeepAlive: true,

      useChunkedEncodingByDefault: true,

      sendDate: true,

      _removedConnection: false,

      _removedContLen: false,

      _removedTE: false,

      _contentLength: null,

      _hasBody: true,

      _trailer: '',

      finished: false,

      _headerSent: false,

      socket: [Circular],

      connection: [Circular],

      _header: null,

      _onPendingData: [Function: bound updateOutgoingData],

      _sent100: false,

      _expect_continue: false,

      req: [Circular],

      locals: [Object: null prototype] {},

      writeHead: [Function: writeHead],

      end: [Function: end],

      [Symbol(kNeedDrain)]: false,

      [Symbol(isCorked)]: false,

      [Symbol(kOutHeaders)]: [Object: null prototype]

    },

    _peername: { address: '127.0.0.1', family: 'IPv4', port: 51058 },

    [Symbol(asyncId)]: 1341,

    [Symbol(kHandle)]: TCP {

      reading: true,

      onconnection: null,

      _consumed: true,

      [Symbol(owner)]: [Circular]

    },

    [Symbol(lastWriteQueueSize)]: 0,

    [Symbol(timeout)]: Timeout {

      _idleTimeout: 120000,

      _idlePrev: [TimersList],

      _idleNext: [Timeout],

      _idleStart: 32355,

      _onTimeout: [Function: bound ],

      _timerArgs: undefined,

      _repeat: null,

      _destroyed: false,

      [Symbol(refed)]: false,

      [Symbol(asyncId)]: 1376,

      [Symbol(triggerId)]: 1343

    },

    [Symbol(kBuffer)]: null,

    [Symbol(kBufferCb)]: null,

    [Symbol(kBufferGen)]: null,

    [Symbol(kBytesRead)]: 0,

    [Symbol(kBytesWritten)]: 0

  },

  _consuming: true,

  _dumped: false,

  next: [Function: next],

  baseUrl: '',

  originalUrl: '/login',

  _parsedUrl: Url {

    protocol: null,

    slashes: null,

    auth: null,

    host: null,

    port: null,

    hostname: null,

    hash: null,

    search: null,

    query: null,

    pathname: '/login',

    path: '/login',

    href: '/login',

    _raw: '/login'

  },

  params: {},

  query: {},

  res: ServerResponse {

    _events: [Object: null prototype] { finish: [Function: bound resOnFinish] },

    _eventsCount: 1,

    _maxListeners: undefined,

    outputData: [],

    outputSize: 0,

    writable: true,

    _last: false,

    chunkedEncoding: false,

    shouldKeepAlive: true,

    useChunkedEncodingByDefault: true,

    sendDate: true,

    _removedConnection: false,

    _removedContLen: false,

    _removedTE: false,

    _contentLength: null,

    _hasBody: true,

    _trailer: '',

    finished: false,

    _headerSent: false,

    socket: Socket {

      connecting: false,

      _hadError: false,

      _parent: null,

      _host: null,

      _readableState: [ReadableState],

      readable: true,

      _events: [Object: null prototype],

      _eventsCount: 8,

      _maxListeners: undefined,

      _writableState: [WritableState],

      writable: true,

      allowHalfOpen: true,

      _sockname: null,

      _pendingData: null,

      _pendingEncoding: '',

      server: [Server],

      _server: [Server],

      timeout: 120000,

      parser: [HTTPParser],

      on: [Function: socketListenerWrap],

      addListener: [Function: socketListenerWrap],

      prependListener: [Function: socketListenerWrap],

      _paused: false,

      _httpMessage: [Circular],

      _peername: [Object],

      [Symbol(asyncId)]: 1341,

      [Symbol(kHandle)]: [TCP],

      [Symbol(lastWriteQueueSize)]: 0,

      [Symbol(timeout)]: Timeout {

        _idleTimeout: 120000,

        _idlePrev: [TimersList],

        _idleNext: [Timeout],

        _idleStart: 32355,

        _onTimeout: [Function: bound ],

        _timerArgs: undefined,

        _repeat: null,

        _destroyed: false,

        [Symbol(refed)]: false,

        [Symbol(asyncId)]: 1376,

        [Symbol(triggerId)]: 1343

      },

      [Symbol(kBuffer)]: null,

      [Symbol(kBufferCb)]: null,

      [Symbol(kBufferGen)]: null,

      [Symbol(kBytesRead)]: 0,

      [Symbol(kBytesWritten)]: 0

    },

    connection: Socket {

      connecting: false,

      _hadError: false,

      _parent: null,

      _host: null,

      _readableState: [ReadableState],

      readable: true,

      _events: [Object: null prototype],

      _eventsCount: 8,

      _maxListeners: undefined,

      _writableState: [WritableState],

      writable: true,

      allowHalfOpen: true,

      _sockname: null,

      _pendingData: null,

      _pendingEncoding: '',

      server: [Server],

      _server: [Server],

      timeout: 120000,

      parser: [HTTPParser],

      on: [Function: socketListenerWrap],

      addListener: [Function: socketListenerWrap],

      prependListener: [Function: socketListenerWrap],

      _paused: false,

      _httpMessage: [Circular],

      _peername: [Object],

      [Symbol(asyncId)]: 1341,

      [Symbol(kHandle)]: [TCP],

      [Symbol(lastWriteQueueSize)]: 0,

      [Symbol(timeout)]: Timeout {

        _idleTimeout: 120000,

        _idlePrev: [TimersList],

        _idleNext: [Timeout],

        _idleStart: 32355,

        _onTimeout: [Function: bound ],

        _timerArgs: undefined,

        _repeat: null,

        _destroyed: false,

        [Symbol(refed)]: false,

        [Symbol(asyncId)]: 1376,

        [Symbol(triggerId)]: 1343

      },

      [Symbol(kBuffer)]: null,

      [Symbol(kBufferCb)]: null,

      [Symbol(kBufferGen)]: null,

      [Symbol(kBytesRead)]: 0,

      [Symbol(kBytesWritten)]: 0

    },

    _header: null,

    _onPendingData: [Function: bound updateOutgoingData],

    _sent100: false,

    _expect_continue: false,

    req: [Circular],

    locals: [Object: null prototype] {},

    writeHead: [Function: writeHead],

    end: [Function: end],

    [Symbol(kNeedDrain)]: false,

    [Symbol(isCorked)]: false,

    [Symbol(kOutHeaders)]: [Object: null prototype] {

      'x-powered-by': [Array],

      'surrogate-control': [Array],

      'cache-control': [Array],

      pragma: [Array],

      expires: [Array],

      'access-control-allow-origin': [Array],

      vary: [Array],

      'access-control-allow-credentials': [Array]

    }

  },

  body: { username: '215', password: '' },

  _body: true,

  length: undefined,

  _parsedOriginalUrl: Url {

    protocol: null,

    slashes: null,

    auth: null,

    host: null,

    port: null,

    hostname: null,

    hash: null,

    search: null,

    query: null,

    pathname: '/login',

    path: '/login',

    href: '/login',

    _raw: '/login'

  },

  sessionStore: MemoryStore {

    _events: [Object: null prototype] {

      disconnect: [Function: ondisconnect],

      connect: [Function: onconnect]

    },

    _eventsCount: 2,

    _maxListeners: undefined,

    sessions: [Object: null prototype] {

      'yJ-BidUl1xgSHDmvlZCnGrGpOXdPEuGG': '{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/","s

ameSite":"lax"}}',

      '6D00jCBjQVjI9oxdDVaixKe_59saqDp1': '{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/","s

ameSite":"lax"}}',

      QM96Ej7oEfXGsCOP8ZrYpwq5jByHCHzy: '{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/","sam

eSite":"lax"}}'

    },

    generate: [Function]

  },

  sessionID: '6D00jCBjQVjI9oxdDVaixKe_59saqDp1',

  session: Session {

    cookie: {

      path: '/',

      _expires: null,

      originalMaxAge: null,

      httpOnly: true,

      sameSite: 'lax'

    }

  },

  route: Route { path: '/login', stack: [ [Layer] ], methods: { post: true } }

}

End

Ionic with Vue 3 and TypeScript

 https://ionicframework.com/blog/announcing-the-new-ionic-vue-beta/

npm install -g @ionic/cli@testing

ionic start my-app tabs --type vue --tag vue-beta

ionic serve

package.json

  "dependencies": {

    "@ionic/vue": "0.3.1",

    "@ionic/vue-router": "0.3.1",

    "core-js": "^3.6.5",

    "vue": "^3.0.0-rc.10",

    "vue-router": "^4.0.0-beta.9"

  },

On 2020/9/14

Only version 0.3.1 and newer of the Ionic Vue beta are compatible with Vue 3. To continue using the Ionic Vue beta with Vue 2, version 0.0.9 should be used.

End

VueJS with ionic @vue/cli @ionic/vue@next

 

clone from C:\d\lab\flaskw3html\19.vuejs\07.ionic\app\notes.md

created on 2020/7/27

repeated on 2020/9/14

"dependencies": {

    "@ionic/vue": "0.0.9",

    "ionicons": "^4.6.3",

    "vue": "^2.6.11",

    "vue-router": "^3.2.0"

  }

Graph DFS and BFS 深度優先 廣度優先 Tree Traversal

 今天想要探討一下關於Graph裡面的DFS、BFS、Stack Treversal以及Binary Tree的Preorder、InOrder、PostOrder Traversal。

先看一下DFS的Iterative代碼

VueJS D3 2020 Tidy Tree Vue Component

 https://observablehq.com/@d3/tidy-tree

Dentro.vue

<!--

<template><div><dentro></dentro></div></template>

<script>

import Dentro from "@/views/Dentro.vue";

export default {components: {Dentro}};

</script>

-->

<template>

  <div>

    <h1>Dentro</h1>

    <div id="arc" class="svgborder" />

    <div id="den" class="svgborder" />

    <h1>End</h1>

  </div>

</template>

<script>

import * as d3 from "d3";

import flareJson from "@/assets/dentro.json";

export default {

  name: "Dentro",

  data() {

    return {

      gdp: [

        { country: "USA", value: 20.5 },

        { country: "China", value: 13.4 },

        { country: "Germany", value: 4.0 },

        { country: "Japan", value: 4.9 },

        { country: "France", value: 2.8 }

      ]

    };

  },

  mounted() {

    this.generateArc("#arc", this.gdp);

    this.generateDen("#den");

  },

  methods: {

    generateDen(id) {

      const width = 1280;

      const data = flareJson;

      const temp = d3.hierarchy(data);

      temp.dx = 10;

      temp.dy = width / (temp.height + 1);

      const root = d3.tree().nodeSize([temp.dx, temp.dy])(temp);

      let x0 = Infinity;

      let x1 = -x0;

      root.each(d => {

        if (d.x > x1) x1 = d.x;

        if (d.x < x0) x0 = d.x;

      });

      const svg = d3

        .select(id)

        .append("svg")

        .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]);

      const g = svg

        .append("g")

        .attr("font-family", "sans-serif")

        .attr("font-size", 10)

        .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`);

      const link = g

        .append("g")

        .attr("fill", "none")

        .attr("stroke", "#555")

        .attr("stroke-opacity", 0.4)

        .attr("stroke-width", 1.5)

        .selectAll("path")

        .data(root.links())

        .join("path")

        .attr(

          "d",

          d3

            .linkHorizontal()

            .x(d => d.y)

            .y(d => d.x)

        );

      console.log(link);

      const node = g

        .append("g")

        .attr("stroke-linejoin", "round")

        .attr("stroke-width", 3)

        .selectAll("g")

        .data(root.descendants())

        .join("g")

        .attr("transform", d => `translate(${d.y},${d.x})`);

      node

        .append("circle")

        .attr("fill", d => (d.children ? "#555" : "#999"))

        .attr("r", 2.5);

      node

        .append("text")

        .attr("dy", "0.31em")

        .attr("x", d => (d.children ? -6 : 6))

        .attr("text-anchor", d => (d.children ? "end" : "start"))

        .text(d => d.data.name)

        .clone(true)

        .lower()

        .attr("stroke", "white");

      const chart = svg.node();

      console.log(chart);

    },

    generateArc(id, gdp) {

      const w = 500;

      const h = 500;

      const svg = d3

        .select(id)

        .append("svg")

        .attr("width", w)

        .attr("height", h);

      const sortedGDP = gdp.sort((a, b) => (a.value > b.value ? 1 : -1));

      const color = d3.scaleOrdinal(d3.schemeDark2);

      const max_gdp = d3.max(sortedGDP, o => o.value);

      const angleScale = d3

        .scaleLinear()

        .domain([0, max_gdp])

        .range([0, 1.5 * Math.PI]);

      const arc = d3

        .arc()

        .innerRadius((d, i) => (i + 1) * 25)

        .outerRadius((d, i) => (i + 2) * 25)

        .startAngle(angleScale(0))

        .endAngle(d => angleScale(d.value));

      const g = svg.append("g");

      g.selectAll("path")

        .data(sortedGDP)

        .enter()

        .append("path")

        .attr("d", arc)

        .attr("fill", (d, i) => color(i))

        .attr("stroke", "#FFF")

        .attr("stroke-width", "1px")

        .on("mouseenter", function() {

          d3.select(this)

            .transition()

            .duration(200)

            .attr("opacity", 0.5);

        })

        .on("mouseout", function() {

          d3.select(this)

            .transition()

            .duration(200)

            .attr("opacity", 1);

        });

      g.selectAll("text")

        .data(gdp)

        .enter()

        .append("text")

        .text(d => `${d.country} -  ${d.value} Trillion`)

        .attr("x", -150)

        .attr("dy", -8)

        .attr("y", (d, i) => -(i + 1) * 25);

      g.attr("transform", "translate(200,300)");

    }

  }

};

</script>

<style scope>

.svgborder svg {

  border: 2px solid;

}

</style>

Middle

End

Sublime Package Controll Install Package Vue Syntax Highlight and Typescript

Vue Syntax Highlight

 https://learnku.com/vuejs/t/23281/configuring-vuejs-syntax-support-for-sublime-text-vue-syntax-highlighting

最近我需要 Sublime Text 编辑器下的 Vue 脚本显示语法高亮。 当你正在使用的代码编辑器没有语法高亮时，你就会发现这是一件多么痛苦的事。 所以，做了一些深入挖掘研究。

然而，我需要从一个站点到另一个站点来解决我的疑问。 因此，我列出了我参考的步骤。 希望这可以帮助到你！

安装 Package Control 扩展包

转到 http://wbond.net/sublime_packages/package_... 链接并复制那段很长的命令。

按住 Ctrl+` 打开 Sublime Text 控制台。

将你复制的命令粘贴到 Sublime Text 控制台中，然后按 Enter 键。

Package Control 扩展包安装好后，重新启动 Sublime Text 编辑器。

安装 Vue Syntax Highlighting 扩展包

再次按下 Command-Shift-P (Mac OS X) 或 Ctrl-Shift-P (Windows)，然后开始输入 “Package Control”

选择 Package Control: Install Package ，它就会列出所有可用的软件包。

搜索 Vue Syntax Highlight 并选择它然后安装。

就是这样！ 你再次打开 .vue 文件就可以看到语法高亮了。

————————————————

原文作者：Summer

转自链接：https://learnku.com/vuejs/t/23281/configuring-vuejs-syntax-support-for-sublime-text-vue-syntax-highlighting

版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请保留以上作者信息和原文链接。

Typescript

再次按下 Command-Shift-P (Mac OS X) 或 Ctrl-Shift-P (Windows)，然后开始输入 “Package Control: Install Package”

搜索 Typescript 并选择它然后安装

测试在2020年9月可以打开ts档案之后可以显示语法

MacBook Air OSX Catalina Setup Homebrew Git

 

Window Mac 快捷鍵

Option Command Esc > Ctrl Alt Del

Option Command Space > Ctrl E

Chrome Command Shift F > F11

Command C, Option Command V > Ctrl X Ctrl V

Command Up Down Left Right [ ] for folder navigation

Chrome  Command L > Ctrl D

Install Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install OpenSSL

sudo chown -R $(whoami) /usr/local/lib/pkgconfig

chmod u+w /usr/local/lib/pkgconfig

brew install openssl

快速放大視窗 Maximize Window Shortcut

url

Preference > Keyboard > App Shortcut > Zoom by Command+Option+=

Some uses Control+Command+= but that's a 2 hand operation

Finder開啟Terminal

以前使用Go2Shell在Catalina無法使用，改用FinderGo url

https://github.com/onmyway133/FinderGo

curl -fsSL https://raw.githubusercontent.com/onmyway133/FinderGo/master/install.sh | sh

Check for System Preferences -> Extensions -> Finder to enable FinderGo if it is not enabled yet

Git GUI

OSX上面沒法使用GitExtension，而且SourceTree在2020年8月時候無法在Catalina使用，於是改用Github Desktop，下載之後拉去Applications就可以。

End

Install Minoconda Python 3.8 on macOS Catalina 2020

 https://medium.com/@nonthakon/install-anaconda-python-3-7-on-mac-osx-catalina-aec9ba7537b7

Miniconda pkg installer, destination myself, files created on ~/opt/Minoconda

control-SPACE > Terminal > ps - p $$ > -zsh

Catalina uses zsh not bash nor csh

Terminal > conda is not recognised

Solution

Terminal

cd ~/opt/miniconda3/bin

conda init zsh

Now Terminal > python and Terminal > conda works