xgqfrms commented 5 years ago

vue & cli

vue-cli

https://cli.vuejs.org/

https://github.com/vuejs/vue-cli

vue +vuex+ vue-router+axios+elementUI

这个前端使用什么技术实现？要考虑一下使用 vue 吗？

https://www.imooc.com/video/16985

install

https://cli.vuejs.org/guide/installation.html

vue 3.x


$ npm i -g @vue/cli

# OR

$ yarb global add @vue/cli

vue 3.x

v3.0.2


$ vue -V

$ vue --version

xgqfrms commented 5 years ago

Hash Router & JWT

SPA, 接口鉴权不再适用于传统的 session 模式，一般需要采用 JWT.

https://www.layui.com/admin/#get

xgqfrms commented 5 years ago

table & css & email template

https://github.com/xgqfrms/FEIQA/issues/59

https://www.cnblogs.com/xgqfrms/p/9877194.html

https://css-tricks.com/complete-guide-table-element/

https://css-tricks.com/accessible-simple-responsive-tables/

https://css-tricks.com/almanac/properties/t/table-layout/

xgqfrms commented 5 years ago

window.open

url & path params

https://stackoverflow.com/questions/13702808/parent-window-open-child-window

https://developer.mozilla.org/en-US/docs/Web/API/Window/open https://developer.mozilla.org/en-US/docs/Web/API/Window/parent


// two new windows
window.open(`./select-tree.html#xxx`, `x`);
window.open(`./select-tree.html#yyy`, `y`);

// only one window
window.open(`./select-tree.html#aaa`, `c`);
window.open(`./select-tree.html#bbb`, `c`);

xgqfrms commented 5 years ago

load & ready

https://developer.mozilla.org/en-US/docs/Web/Events/readystatechange https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

hash & change

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange

window.open & _blank link

https://cdn.xgqfrms.xyz/window-open/index.html

xgqfrms commented 5 years ago

table & colgroup


    // <caption>版本信息</caption>
    table = `
        <table class="versions-table">
            <colgroup>
                <col width="20%">
                <col width="30%">
                <col width="40%">
                <col width="10%">
            </colgroup>
            <thead>
                <tr>
                    <th class="min-th">版本编号</th>
                    <th class="min-th">封版时间</th>
                    <th class="min-th">版本说明</th>
                    <th class="min-th">操作</th>
                </tr>
            </thead>
            <tbody data-body="view-versions">${trs}</tbody>
        </table>
    `;

xgqfrms commented 5 years ago

vue 3.x

https://cli.vuejs.org/guide/creating-a-project.html


$ vue create vue-cli-app

xgqfrms commented 5 years ago

vue cli & how to select the option in cmd ?

vue cli & 选中 option

a === select all & i === select all

1,2,3,4,5,6,7,8,9,0

分别对应 order

xgqfrms commented 5 years ago

vue ui

https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui


$ vue ui

# http://localhost:8000/plugins

xgqfrms commented 5 years ago

npm error

yarn ok ?


$ vue create vue-cli-app

# shit vue cli
$ npx vue-create vue-cli-app

vue 3.x

vue-cli-app

# shit vue cli
$ cd vue-cli-app && yarn install

xgqfrms commented 5 years ago

vue cli & npx

https://flaviocopes.com/npx/

$ vue create vue-cli-app

# shit vue cli
$ npx vue-create vue-cli-app

https://github.com/zkat/npx/issues/112

https://cli.vuejs.org/guide/cli-service.html

https://blog.sourcerer.io/vue-cli-3-game-changer-or-barely-useful-82a025199957?gi=bf5bbec604aa https://medium.com/@almeynman/setup-vue-with-storybook-using-vue-cli-3-0-typescript-example-1be64a7cc7ac

xgqfrms commented 5 years ago

单文件，组件

Object & Function

old data === Object

new data === Function

https://www.imooc.com/u/1066571/notepad/980

xgqfrms commented 5 years ago

parent & children

父子组件通信 & props

for loop & unique key

call parent methods

Array.splice(index, 1)

css & scoped

scroped & css 代码冗余，无法复用

xgqfrms commented 5 years ago

学习 Vue 的一些方法

1.视频教程带你入门：初学者如果没有MVVM模式的基础学习Vue，可能初期切换思路有比较大的难度，这个时候可以借助视频教程辅助入门，而如果你对React或者Angular有过工作经验或者足够多的了解，那么可以省略这一步了，直接读官方文档会是更好的选择。

2.细读文档： Vue的官方文档上基本包含了Vue的所有知识点，文档看透，Vue也就掌握的很好了。

3.高级知识点深究：Vue中的一些难点，比如说服务器端渲染（SSR），预渲染，高级异步组件，递归组件，Vuex，vue-router，weex这样的内容，这个阶段需要把这些知识一一攻克。

4.源码阶段：到了这个阶段的同学，基本上可以游刃有余的使用Vue进行项目开发了，接下来就是深挖Vue的实现原理了，你可以通读Vue，Vuex，vue-router这些库的源码，做到从底层理解Vue的设计思路。

5.横向学习：当你从底层驾驭了Vue，是时候开始扩展你的只是广度了，你可以尝试学习React，Angular等其他框架，横向打通这些框架之间的关联：我们经常说某些框架好，某些框架不好，但是实际上如果你深入学习每个框架，它们都有自己优秀的设计理念和适用场景，只有你对每一个框架有了深入的理解后，才能够横向对比理解框架各自最大的优势。到时候，我相信大家也就不会随便喷其他框架了，Vue也可以用的炉火纯青了。

https://www.imooc.com/article/24811

xgqfrms commented 5 years ago

vs code & zh-Hans

https://github.com/xgqfrms/vscode/issues/13

xgqfrms commented 5 years ago

CentOS & NVM & Yarn &Vue 3.x

CentOS

6.x (old)

https://yarnpkg.com/lang/en/docs/install/#centos-stable

$ curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

$ sudo yum install yarn

$ yarn -v

https://tecadmin.net/install-yarn-debian/

xgqfrms commented 5 years ago

http://localhost:8000/project/select http://10.1.5.202:8000/project/select

http://localhost:8083/ http://10.1.5.202:8083/

$ vue create vue-cli-app

$ cd vue-cli-app

$ yarn serve

$  code add ./vue-cli-app

http://10.1.5.202:7777 http://10.1.5.202:8888

xgqfrms commented 5 years ago

shit cnpm

Yarn & npm

OK

React & eject configs

https://github.com/xyz-data/RAIO/issues/35

xgqfrms commented 5 years ago

npm err

shit cnpm

https://github.com/vuejs/vue-cli/issues/2872

xgqfrms commented 5 years ago

npm

https://stackoverflow.com/questions/22764407/npm-install-goes-to-dead-in-china


$ npm config set registry https://registry.npmjs.org

`C:\Users\xgqfrms\.npmrc`

.npmrc


;;;;
; npm userconfig file
; this is a simple ini-formatted file
; lines that start with semi-colons are comments.
; read `npm help config` for help on the various options
;;;;

registry=https://registry.npmjs.org/

;;;;
; all options with default values
;;;;
; access=null

; allow-same-version=false

; always-auth=false

; also=null

; auth-type=legacy

; bin-links=true

; browser=null

; ca=null

; cafile=undefined

; cache=C:\Users\xgqfrms\AppData\Roaming\npm-cache

; cache-lock-stale=60000

; cache-lock-retries=10

; cache-lock-wait=10000

; cache-max=null

; cache-min=10

; cert=null

; cidr=null

; color=true

; depth=null

; description=true

; dev=false

; dry-run=false

; editor=notepad.exe

; engine-strict=false

; force=false

; fetch-retries=2

; fetch-retry-factor=10

; fetch-retry-mintimeout=10000

; fetch-retry-maxtimeout=60000

; git=git

; git-tag-version=true

; commit-hooks=true

; global=false

; globalconfig=C:\Users\xgqfrms\AppData\Roaming\npm\etc\npmrc

; global-style=false

; group=0

; ham-it-up=false

; heading=npm

; if-present=false

; ignore-prepublish=false

; ignore-scripts=false

; init-module=C:\Users\xgqfrms\.npm-init.js

; init-author-name=

; init-author-email=

; init-author-url=

; init-version=1.0.0

; init-license=MIT

; json=false

; key=null

; legacy-bundling=false

; link=false

; local-address=undefined

; loglevel=notice

; logs-max=10

; long=false

; maxsockets=50

; message=%s

; metrics-registry=null

; node-version=8.9.1

; offline=false

; onload-script=null

; only=null

; optional=true

; otp=0

; package-lock=true

; parseable=false

; prefer-offline=false

; prefer-online=false

; prefix=H:\Program Files\nodejs

; production=false

; progress=true

; proxy=null

; https-proxy=null

; user-agent=npm/{npm-version} node/{node-version} {platform} {arch}

; read-only=false

; rebuild-bundle=true

; registry=https://registry.npmjs.org/

; rollback=true

; save=true

; save-bundle=false

; save-dev=false

; save-exact=false

; save-optional=false

; save-prefix=^

; save-prod=false

; scope=

; script-shell=null

; scripts-prepend-node-path=warn-only

; searchopts=

; searchexclude=null

; searchlimit=20

; searchstaleness=900

; send-metrics=false

; shell=C:\WINDOWS\system32\cmd.exe

; shrinkwrap=true

; sign-git-tag=false

; sso-poll-frequency=500

; sso-type=oauth

; strict-ssl=true

; tag=latest

; tag-version-prefix=v

; timing=false

; tmp=C:\Users\xgqfrms\AppData\Local\Temp

; unicode=false

; unsafe-perm=true

; usage=false

; user=0

; userconfig=C:\Users\xgqfrms\.npmrc

; umask=0

; version=false

; versions=false

; viewer=browser

; _exit=true

; globalignorefile=C:\Users\xgqfrms\AppData\Roaming\npm\etc\npmignore

xgqfrms commented 5 years ago

shit vue-cli

remove vue-cli

https://stackoverflow.com/questions/51615051/how-can-i-remove-vue-cli-2 https://docs.npmjs.com/getting-started/uninstalling-global-packages

https://docs.npmjs.com/cli/uninstall


$ npm uninstall vue-cli -g
$ npm uninstall @vue/cli -g

xgqfrms commented 5 years ago

vue ui

https://github.com/vuejs/ui https://vuejs.github.io/ui/#/ https://github.com/Akryum/vue-apollo

https://www.apollographql.com/

App.vue

webpack:///src/App.vue


<template>
  <div id="app" class="app">
    <ConnectionStatus v-if="ready" />
    <div v-if="ready" class="content">
      <router-view/>
    </div>
    <VueLoadingIndicator v-else class="app-init-loading overlay big accent"/>

    <StatusBar/>
    <ClientAddonLoader/>
    <LocaleLoader/>
  </div>
</template>

<script>
import i18n from './i18n'

export default {
  metaInfo: {
    titleTemplate: chunk => chunk ? `[Beta] ${chunk} - Vue CLI` : '[Beta] Vue CLI'
  },

  computed: {
    ready () {
      return Object.keys(i18n.getLocaleMessage('en')).length
    }
  }
}
</script>

<style lang="stylus">
@import "~@vue/ui/dist/vue-ui.css"
@import "~@/style/main"
</style>

<style lang="stylus" scoped>
@import "~@/style/imports"

.app
  display flex
  flex-direction column

.connection-status,
.status-bar
  flex auto 0 0

.content
  flex auto 1 1
  height 100%
  overflow hidden

.app-init-loading
  z-index 100000
</style>

OK

Yarn

xgqfrms commented 5 years ago

https://cli.vuejs.org/guide/cli-service.html#configuration-without-ejecting

https://cli.vuejs.org/config/#global-cli-config

.vuerc

home path

C:\Users\xgqfrms.vuerc


{
  "packageManager": "npm",
  "useTaobaoRegistry": false,
  "presets": {
    "xgqfrms": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      }
    },
    "vue-cli-3.x": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-pwa": {},
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "router": true,
      "routerHistoryMode": true,
      "vuex": true,
      "cssPreprocessor": "sass"
    }
  }
}

xgqfrms commented 5 years ago