vue react項目遇到的問題

npm install -g typescript  // 全局安裝TS

tsc --v  // 檢視版本

sql root

ctrl+alt+i,添加 檔案頭 注釋

ctrl+alt+t,添加 函數 注釋


netstat -ano | findstr "7001"

js執行上下文

全局執行上下文

函數執行上下文

eval執行上下文

    
dva 是體驗技術部開發的 React 應用架構，将上面三個 React 工具庫包裝在一起，簡化了 API，讓開發 React 應用更加友善和快捷。

dva = React-Router + Redux + Redux-saga

State：一個對象，儲存整個應用狀态
View：React 元件構成的視圖層
Action：一個對象，描述事件
connect 方法：一個函數，綁定 State（狀态） 到 View （視圖）
dispatch 方法：一個函數，發送 Action （行為/動作） 到 State （更改狀态）

.ts是普通檔案
.d.ts是聲明檔案

js->ts
jsx->tsx

FC = Functional Component
SFC = Stateless Functional Component (已棄用)

如果隻想要檔案夾的目錄 ，那麼最後一步輸入 tree >tree.txt 


1、解決：在移動端會出現一旦頁面元素的高度大于整個頁面後，滾動頁面元素的時候，背景也會随之而動。而且背景會被撐開。
body:before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(bg.png) center 0 no-repeat;
  background-size: cover;
}

2、解決：當某個網頁中呈現的圖檔較多時，由于網絡等原因，通路該網頁時，所有的圖檔不會立馬全部進行顯示出來，會出現一定的網絡延遲加載的現象，影響使用者體驗。

vue-lazyload ：一個簡單易用的 Vue 圖檔延遲加載插件（很多ui庫有類似現成元件）
npm/cnpm install vue-lazyload -S （安裝）

import VueLazyload from 'vue-lazyload' （main.js引入配置）

Vue.use(VueLazyload, {
  preLoad: 1.3, // 預壓高度的比例
  error: '../assets/img/no-pic.png', // 圖像的加載失敗時 顯示的error圖示
  loading: '../assets/loading.png', // 圖像正常加載時 顯示的loading圖示
  attempt: 1 // 圖像嘗試加載 次數
})

在元件中使用

<img v-lazy="item.imgUrl" alt="">


3、HTML5 History 模式 vue預設是hash模式用路由的 history 模式，需要背景配置支援；

要在服務端增加一個覆寫所有情況的候選資源：如果 URL 比對不到任何靜态資源，則應該傳回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面；


4、iOS更新後 手機端鍵盤不能複位bug

Vue.directive('blur', function (el) {
    el.addEventListener('blur',function(event){
        window.scrollTo(0,0);
    })
});



Simple React Snippets插件

imr    Import React
imrc    Import React / Component
impt    Import PropTypes
impc    Import React / PureComponent
cc    Class Component
ccc    Class Component With Constructor
sfc    Stateless Function Component
cdm    componentDidMount
cwm    componentWillMount
cwrp    componentWillReceiveProps
gds    getDerivedStateFromProps
scu    shouldComponentUpdate
cwu    componentWillUpdate
cdu    componentDidUpdate
cwu    componentWillUpdate
cdc    componentDidCatch
gsbu    getSnapshotBeforeUpdate
ss    setState
ssf    Functional setState
ren    render
rprop    Render Prop
hoc    Higher Order Component

Emmet配置react（補全 react 檔案中 JSX 裡面的标簽） vue TAB 鍵自動補全元件标簽
{
    "files.autoSave": "off",
    "editor.tabSize": 2,
    "window.zoomLevel": 0,
    "terminal.integrated.shell.windows": "C:\\windows\\System32\\cmd.exe",
    "vsicons.dontShowNewVersionMessage": true,
    "emmet.includeLanguages": {"javascript": "javascriptreact","vue-html": "html",},
    "emmet.triggerExpansionOnTab": true,
    "view-in-browser.customBrowser": "chrome"
}

建立react項目步驟：
1.node.js
2.npx create-react-app my-app // 初始化項目
3.cd my-app // 進入項目
4.npm start // 啟動項目

dva腳手架搭建應用級别

umijs 插件架構


React Hooks + Egg.js實戰
npm install -g create-next-app  // 安裝 Next.js 的腳手架工具

yarn add @zeit/next-css // 讓Next.js可以加載CSS檔案

yarn add antd // 安裝antd ui庫

yarn add babel-plugin-import // 按需引入插件 在項目根目錄建立.babelrc檔案

{
    "presets":["next/babel"],  // Next.js的總配置檔案，相當于繼承了它本身的所有配置
    "plugins":[
        [
            "import",
            {
                "libraryName":"antd" // 庫名
            }
        ]
    ]
 }

npx create-next-app xx // 建立xx項目

yarn dev // 啟動      

vue-cli4.0 + TS測試項目 vue create demo 選項全選（因為是測試想看下完整的項目骨架）
通過↑ ↓ 箭頭選擇你要配置的項，按 空格 是選中，按 a 是全選，按 i 是反選
額外的說明：
選擇Eslint代碼驗證規則時候
提供一個插件化的javascript代碼檢測工具，ESLint + Prettier //使用較多

( ) Lint on save // 儲存就檢測（推薦）
( ) Lint and fix on commit // fix和commit時候檢查

In dedicated config files // 獨立檔案放置
In package.json // 放package.json裡（推薦/個人随意吧） 獨立檔案放置，項目會有多出單獨的幾件檔案；

用Vue-Cli腳手架建立項目時會選擇使用ESLint + Prettier來統一我們的前端代碼風格，但這對新手使用有很大困難，嚴格的格式要求容易出現很多警告和錯誤，這時最好關閉Prettier;
如果選擇的是單獨檔案則： 在.eslintrc.js檔案中配置關閉Prettier； 在rules中增加一行："prettier/prettier": "off" 
若是直接在package.json檔案中：則在rules字段中配置 "prettier/prettier": "off"  
重新開機後生效 （當然不關閉直接按自己的習慣配置也是可以的）

vue-cli4 運作時報錯 ‘xxxx’ is never reassigned. Use ‘const‘ instead prefer-const  
如果選擇的是單獨檔案則： 在.eslintrc.js檔案中配置不是則在package.json檔案rules字段中配置："prefer-const": "off"