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"