React基础

React

1.使用脚手架创建项目 npx create-react-app my-app

2.cd my-app

3.npm start

JSX表达式使用

使用{}识别变量

const name = 'ashin'
const getAge =  ()=>{
  return 22
}
const flag = true

function App() {
  return (
    <div className="App">
      {name}
      {getAge()}
      {flag?'很厉害':'很菜'}
    </div>
  );
}

使用JSX实现列表渲染

技术方案 map-------------------vue里面使用v-for

const songs = [
  {id:1,name:'ashin',age:22,},
  {id:2,name:'john',age:23,},
  {id:3,name:'Tom',age:24,}
]
<ul>
       {songs.map(song=><li key={song.id}>{song.name}</li>)}
      </ul>

JSX条件渲染

技术方案：三元表达式或者逻辑&&运算----- vue里面使用v-if或v-show

const flag = true
 { flag ? <div><span>三元表达式实现条件渲染</span></div>:null }
{ flag && <div><span>逻辑与实现条件渲染 </span></div> }

如果条件渲染逻辑比较复杂使用函数来写分支逻辑，模板只负责调用

const getHdom = (type)=>{
  if(type===1) return <h1>this is h1</h1>
  if(type===2) return <h2>this is h2</h2>
  if(type ===3 ) return <h3>this is h3</h3>
}

function App() {
  return (
  <div className="App">
   { getHdom(2) }
    </div>
    
  );
}

JSX样式控制

1.行内样式—在元素身上绑定一个style属性即可
2.类名样式—在元素身上绑定className属性

// 1.直接写在行内
<span style={{color:'red',fontSize:'30px'}}>行内样式控制</span>

//2.把样式抽离出来
const sty = {
    color:'red',
    fontSize:'30px'
}
<span style={sty}>行内样式控制</span>

// 3.类名样式
<span className='active'>类名样式</span>

动态类名控制

const activeFlag = true
<span className={activeFlag?'active':''}>动态控制类名样式</span>

JSX注意事项

1. JSX必须只有一个根节点 或者使用幽灵节点<></>包裹
2.所以标签必须形成闭合，成对闭合或者自闭合都可以
3.JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class–>className 、for–>htmlFor
4.JSX支持多行（换行），如果需要换行，需使用（）包裹，防止bug出现

函数组件的创建与渲染

约定说明：
1.组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签
2.函数组件必须有返回值，表示该组件的UI结构；如果不需要渲染任何内容，则返回null
3.组件就像HTML标签一样可以被渲染到页面中，组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容
4.使用函数名称作为组件标签名称，可以成对出现也可以自闭合

function Hello(){
    return <div>Hello</div>
}

function App(){
    return (
        <div>
            <Hello/>
        </div>
    )
}

类组件的创建和渲染

class HelloComponent extends React.component{
    render(){
        return <div>this is class component</div>
    }
}

function App(){
    return (
        <div>
            <HelloComponent/>
        </div>
    )
}

函数组件与类组件的区别：

1.函数组件：没有状态，也叫无状态组件；负责静态结构的展示
2.类组件：有状态，也叫有状态组件；提供状态，提供交互
3.状态也叫数据，是私有的。
4.状态也就像vue2里面的data，vue3里面的ref、reactive

事件绑定

语法： on + 事件名称 = {事件处理程序}

// 1.函数组件
function HelloFn(){
    const clickHandle = ()=>{
        console.log('被点击了！')
    }
    return <div onClick={clickHandle}>点击我</div>
}

// 2.类组件
class HelloComponent extends React.component{
    const clickHandle = ()=>{
        console.log('被点击了！')
    }
    render(){
        return <div onClick={this.clickHandle}>this is class component</div>
    }
}

事件对象e

function HelloFn(){
    const clickHandle = (e)=>{
    console.log(e)
        console.log('被点击了！')
        e.preventDefault() // 阻止默认行为
    }
    return <div><a onClick={clickHandle} href="http://www.baidu.com">百度</a></div>
}

如何传递自定义参数

1.只需要一个额外参数：{}里改变为箭头函数即可

{()=>clickHandle(‘自定义参数’)}
2.既需要事件对象e又需要额外参数
{(e)=>clickHandle(e,‘自定义参数’)}

组件状态的定义使用

import React from 'react'
class TestComponent extends React.component{
    // 1.定义组件状态
    state = {
        // 在这里可以定义各种属性，全部都是当前组件的状态
        name:'ashin'
    }
    changeName = ()=>{
    // 2.修改state中的属性
        this.setState({
            name:'阿信'
        })
    }
    render(){
        return (
            <div>
            // 3.使用状态
                当前的name为:{this.state.name}
                <button onClick={this.changeName}>修改</button>
            </div>
            
        )
    }
}

小结

0.state相当于vue中的data，也就是用于存放数据的，但是在使用上和data很不一样
1.react编写组件其实就是写原生js类或者函数
2.定义状态必须通过state实例属性的方法提供一个对象，名称是固定的就叫做state
3.修改state中的任何属性都不可以直接赋值，必须使用setState方法。这个方法来自继承得到
4.这里的this关键词，很容易出现指向错误的问题，需要规范书写

组件this指向问题

第一种写法 箭头函数写法 推荐写法

class TestComponent extends React.Component {
 
 state = {
    name: 'ashin'
  }
  
 changeName = () => {
    this.setState({
     name: '阿信'
     })
   }
   
   render () {
    return (
      <div>
        当前的name为{this.state.name}
        <button onClick={this.changeName}>修改</button>
      </div>
    )
  }
  }

第二种写法 使用bind改变this指向-- 了解即可

class TestComponent extends React.Component {
 constructor(){
     super()
     this.changeName = this.changeName.bind(this)
 }
 
 state = {
    name: 'ashin'
  }
  
 changeName() {
    this.setState({
     name: '阿信'
     })
   }
   
   render () {
    return (
      <div>
        当前的name为{this.state.name}
        <button onClick={this.changeName}>修改</button>
      </div>
    )
  }
  }

第三种写法 在模板调用函数的时候使用箭头函数

class TestComponent extends React.Component {
 
 state = {
    name: 'ashin'
  }
  
 changeName () {
    this.setState({
     name: '阿信'
     })
   }
   
   render () {
    return (
      <div>
        当前的name为{this.state.name}
        <button onClick={()=>this.changeName()}>修改</button>
      </div>
    )
  }
  }

受控表单组件-----类似于vue中的v-model

步骤：
1.声明用来控制input value的react组件的状态
2.给value绑定react state
3.给input绑定change事件，为了拿到当前输入的数据
4.写回调函数修改state中绑定的value的值

class InputHand extends React.Component {
// 1.声明用来控制input value的react组件的状态
  state = {
    message: 'ashin'
  }
  
  // 4.写回调函数修改state中绑定的value的值
  inputChange = (e) => {
    console.log('触发了', e, this)
    this.setState({
      message: e.target.value
    })
  }
  
  render () {
    return (
    // 2. 给value绑定react state
    // 3.给input绑定change事件，为了拿到当前输入的数据
      <div>
        <input type="text" value={this.state.message} onChange={this.inputChange} />
      </div>
    )
  }
}

非受控组件 — 相当于vue中ref获取dom元素，然后拿到原生dom元素里面的value值

1.导入createRef函数
2.调用createRef函数，创建一个ref对象，存储名为msgRef的实例属性中
3.为input添加ref属性，值为msgRef
4.在按钮的事件处理函数中，通过msgRef.current即可拿到input对应的dom元素，而其中msgRef.current.value拿到的就是文本框的值

import React,{createRef} from 'react'
class Input extends React.Component{
    msgref = create()
    getValue = () => {
    console.log(this.msgref.current.value)
  }
  render () {
    return (
      <div>
        <input type="text" ref={this.msgref} />
        <button onClick={this.getValue}>获取</button>
      </div>
    )
  }
    
}

React组件通信

父传子：props

// 函数式的Son
function SonF (props) {
// peops是一个对象，里面存着通过父组件传递过来的所以数据
  return (
    <div>this is Sonc: {props.msg}</div>
  )
}

// 类组件的Son
class SonC extends React.Component {
// 类组件必须通过this关键词获取这里的props是固定的
  render () {
    return (
      <div>this is SonC:{this.props.msg}</div>
    )
  }
}

class Father extends React.Component {
  state = {
    message: 'data'
  }
  render () {
    return (
      <div>
        <SonC msg={this.state.message} />
        <SonF msg={this.state.message} />
      </div>
    )
  }
}

子传父： 子组件调用父组件传递过来的参数，并且把想要传递的数据当成函数的实参传入即可

function Son(props){
const { getMsg } = props
    return (
        <div>
            <span>this is Son:</span>
            <button onClick={()=>getMsg('子组件传递的数据')}>click</button>
        
        </div>
    )
}

class Father extends React.Component{
    getMessage = (sonMsg)=>{
        console.log(sonMsg)
    }
    <Son getMsg={getMessage} />
}

兄弟组件的通信 先传给父组件，在由父组件传给兄弟组件

// SonA 传递数据给 SonB
function SonA (props) {
  return (
    <>
      <div>this is SonA:</div>
      <button onClick={() => props.getAMsg('A发送过去的数据')}>发送数据</button>
    </>
  )
}

function SonB (props) {
  return (
    <div>this is SonB:{props.sendBMsg}</div>
  )
}

class App extends React.Component{
state = {
    msg: '默认数据'
  }
  getA = (data) => {
    this.setState({
      msg: data
    })
  }
    <SonA getAMsg={this.getA}></SonA>
    <SonB sendMsg={this.state.msg}></SonB>
}

Context跨组件传递数据

例如： App --> A–> C
App数据 --> C
注意事项：
1.上层组件和下层组件是相对的，只要存在就可以使用，通常我们会通过App作为数据提供方
2.这里涉及到的语法都是固定的，有两处，第一处是提供方：必须是value={传递的数据}；第二处是接收方：必须是{value=>使用value做什么都可以}

// 1.导入createContext方法并执行，结构是提供者Provider和消费者Comsumer分别包裹，与vue中的provider和inject类似
const {Provider,Consumer} = createContext()

function C(){
    return (
    <>
    <div>this is C</div>
    <Consumer>
        {value=><span>{value}</span>}
    </Consumer>
    </>
    )
}

function A(){
    return (
        <div>
        this is A
        <C />
        </div>
    )
}

class App extends React.Component{
state = {
    msg:'this is data'
}
    render(){
        return (
        <Provider value={this.state.msg}>
        <div>
            <A />
        </div>
        </Provider>
        )
    }
}

特殊的children属性

在子组件中写的东西都被存储在children中，可以写普通文本、普通标签元素、函数、JSX

function ListItem({children}){
    return (
        <div>ListItem,{children}</div>
    )
}

class App extends React.Component{
    render(){
        return (
            <div>
                <ListItem>
                 this is children
                 
                </ListItem>
            
            </div>
        )
    }
}

props类型校验

1.函数组件

function List({pageSize = 10}) {
  return (
    <div>
      此处展示props的默认值：{ pageSize }
    </div>
  )
}

// 不传入pageSize属性
<List />

2.类组件

class List extends Component {
  static defaultProps = {
    pageSize: 10
  }

  render() {
    return (
      <div>
        此处展示props的默认值：{this.props.pageSize}
      </div>
    )
  }
}

<List />

组件生命周期

只有类组件才有生命周期，函数组件是没有的（类组件实例化，函数组件不需要实例化）

挂载阶段：

1. constructor：创建组件时最先执行，初始化的时候只执行一次，作用：一般用来初始化state（现在一般不这么用了），创建Ref，使用bind解决this问题
   2.render：每次组件渲染时都会触发，作用：渲染UI（不能在里面调用setState()）
   3.componentDidMount:组件挂载（完成DOM渲染）后执行，初始化时只执行一次。作用：一般用来发送网络请求，DOM操作；类似于vue中的mounted
   更新阶段：
   1.render:与挂载阶段是同一个render
   2.componentDidUpdate:组件更新后（DOM渲染完毕），作用：DOM操作，可以获取到更新后的DOM内容，不要直接调用setState

卸载阶段：
componentWillUnmount：组件卸载（从页面中消失），作用：执行清理工作（比如：清理定时器）

Hook

React的设计理念：UI = f(data)
1.什么是hook？
Hook的本质：一套能够使函数组件更加强大，更灵活的钩子
2.Hook解决了什么问题？
1.解决了状态逻辑复用。2.class组件自身的问题
3.Hook的优势：
1.告别难以理解的class 2.解决业务逻辑难以拆分的问题 3.使状态逻辑复用变的简单可行 4.函数组件在设计思想上，更加契合React的设计理念

useState

注意事项：1.只能出现在函数组件中；2.不能嵌套在if/for/其他函数中（react按照hooks的调用顺序识别每一个hook）

1.导入useState函数
2.执行这个函数并且传入初始值，必须在函数组件中
3.[数据，修改数据的方法]
4.使用数据 修改数据

import {useState} from 'react'
function App(){
    const [count.setCount] = useState(0)  //解构赋值写法，名字可以自定义，setCount函数作用用来修改count 不能修改原值而是生成新值替换
    return (
        <div>
            <button onClick={()=>setCount(count++)}>{count}</button>
        </div>
    )
}

useEffect

1.理解函数的副作用

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于React组件来说，主作用就是根据数据渲染UI。除此之外都是副作用（比如：数据请求ajax，手动修改dom，localstorage操作）；useEffect函数就是为函数组件提供副作用处理的
使用：
1.导入useEffect函数
2.在函数组件中执行 传入回调 并且定义副作用
3.当我们通过修改状态更新组件时，副作用也会不断执行

import {useState,useEffect} from 'react'
function App(){
    const [count,setCount] = useState(0)
    useEffect(()=>{
        // 定义副作用
        document.title = count
        
    })
    return (
        <div>
            <button onClick={()=>setCount(count+1)>{count}</button>
        </div>
    )
}

useEffect添加依赖项控制执行时机

1.不添加依赖项： 组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行

useEffect(()=>{
    console.log('副作用执行了')
})

2.添加空数组: 组件只在首次渲染时执行一次

useEffect(()=>{
     console.log('副作用执行了')
},[])

3.添加特定依赖项： 首次渲染时执行，在依赖项发生变化时重新执行

function App() {  
    const [count, setCount] = useState(0)  
    const [name, setName] = useState('zs') 

    useEffect(() => {    
        console.log('副作用执行了')  
    }, [count])  

    return (    
        <>      
         <button onClick={() => { setCount(count + 1) }}>{count}</button>      
         <button onClick={() => { setName('cp') }}>{name}</button>    
        </>  
    )
}

自定义Hook函数 ，实现自动获取滚动距离Y

import { useState } from "react"

export function useWindowScroll () {
  const [y, setY] = useState(0)
  window.addEventListener('scroll', () => {
    const h = document.documentElement.scrollTop
    setY(h)
  })
  return [y]
}

自定义Hook函数，实现自动同步到localStorage中

import {useState,useEffect} from 'react'
export function useLocalStorage(key,defaultValue){
    const [message,setMessage] = useState(defaultValue)
    useEffect(()=>{
        window.localStorage.setItem(key,message)
        
    },[key,message])
    return [message,setMessage]
}

import {useLocalStorage} from './'
function App(){
    const [message,setMessage] = useLocalStorage('hook-key','ashin')
    setTimeOut(()=>{
        setMessage('阿信')
    },3000)
    return (
    <div>{message}</div>
    )
}

useState—函数作为参数

如果要初始化的数据无法直接得到需要通过计算才能获取到，使用useState(()=>{})

import { useState } from 'react'

function Counter(props) {
  const [count, setCount] = useState(() => {
    return props.count
  })
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}

function App() {
  return (
    <>
      <Counter count={10} />
      <Counter count={20} />
    </>
  )
}

export default App

useEffect清除副作用

例如清除定时器:如果不清理，组件虽然已经不显示了，但是定时器依旧在运行，在return函数中清理副作用

function Test(){
    useEffect(()=>{
    
       let timer = setInterval(()=>{
            console.log('定时器开启')
        },1000)
        
        return ()=>{
            //添加清除副作用函数
            clearInterval(timer)
        }
    })
}

useEffect–发送网络请求

在类组件中是在生命周期componentUnMounted里发送请求，而在hook中，是用useEffect中

function App(){
    useEffect(()=>{
    
        async function getData(){
    
            const data = await.axios.get('http://geek.itheima.net/v1_0/channels')
        },[])
}

错误写法

function App(){
    useEffect(async ()=>{
            const data = await.axios.get('http://geek.itheima.net/v1_0/channels')
        },[])
}

useRef

在函数组件中获取真实dom元素对象或者组件对象
使用步骤
1.导入useRef函数
2.执行useRef函数并且传入null值，返回值为一个对象，里面有一个current属性存放拿到的dom对象
3.通过ref绑定 要获取的元素或组件

const {useRef} from 'react'
function App(){
    const testRef = useRef(null)
    useEffect(()=>{
        // 拿到了dom元素
        console.log('testRef.current')
    },[])
    return (
      <div ref={testRef}>this is test</div>
    )
}

useContext

使用步骤：
1.使用createContext创建Context对象
2.在顶层组件中使用Provider提供数据
3.在底层组件中通过useContext函数获取数据

import { useState, useContext, createContext } from 'react'
const Context = createContext()
function ComA () {
  const num = useContext(Context)
  return (
    <div>
      this is ComA
      App组件传过来的数据:{num}
      <ComB />
    </div>
  )
}

function ComB () {
  const num = useContext(Context)
  return (
    <div>
      this is ComB
      App组件传过来的数据:{num}
    </div>
  )
}
function App(){
const [num,setNum] = useState(10)
    <Context.Provider value={num}>
    <div>
      <ComA></ComA>
      <button onClick={()=>{setNum(num+1)}}>+</button>
      </div>
    </Context.Provider>
}

路由

基础使用：
1.安装 yarn add react-router-dom@6
2.核心组件BrowerRouter

两种常用Router：HashRouter和BrowseRouter;

import {HashRouter} from 'react'
function App(){
    return (
    // 声明当前要用一个hash模式的路由
        <HashRouter>
        // 指定跳转的组件 to用来匹配路由的地址
            <link to="/">首页</link>
            <link to="/about">关于</link>
            // 路由出口 路由对应的组件会在这里进行渲染 相当于vue中router-view
            <Routes>
                // 指定路径和组件的对应关系 path代表路径 element代表组件
                <Route path='/' element={<Home />} >
                <Route path='/' element={<About />} >
            </Routes>
        </HashRouter>
    )
}

编程式导航—路由跳转
使用js编程的方式实现路由的跳转
语法使用：
1.导入useNavigate钩子函数
2.执行钩子函数得到跳转函数
3.执行跳转函数完成跳转
4.如果在跳转时不想加历史记录，可以添加额外参数replace为true

import {useNavigate} from 'react-router-dom'
const login = ()=>{
    const navigate = useNavigate()
    const getAbout = ()=>{
        navigate('/about',{replace:true})
    }
    return (
        <div>
          login
          <button onClick={getAbout}>切换到关于页</button>
        </div>
    )
}

路由跳转携带传参

两种传参数方式：
1.searchParams传参

// 传参
navigate('/about?id=101')
// 取参
let [params] = useSearchParams()
let id = params.get('id')

2.params传参

// 传参
navigate('/about/101')

// 取参
let params = useParams()
let id = params.id

嵌套路由的写法

function App(){
    return (
        <HashRouter>
            <link to="/">首页</link>
            <link to="/about">关于</link>
            // 路由出口 路由对应的组件会在这里进行渲染 相当于vue中router-view
            <Routes>
                <Route path='/' element={<Home />} >
                    // 定义二级路由嵌套
                    <Route path='article' element={<Article />} > </Route>
                    <Route path='board' element={<Board />} > </Route>
                </Route>
                <Route path='/' element={<About />} ></Route>
            </Routes>
        </HashRouter>
    )
}

// 在一级路由Home组件中定义出口
import {Outlet} from 'react-router-dom'
function Home(){
    return (
        <div>
          Home
          <Outlet/>
        </div>
    )
}

默认二级路由设置: 把要默认的那条路由不设置path 改为index, vue中是设置path为’/’

function App(){
    return (
        <HashRouter>
            <link to="/">首页</link>
            <link to="/about">关于</link>
            // 路由出口 路由对应的组件会在这里进行渲染 相当于vue中router-view
            <Routes>
                <Route path='/' element={<Home />} >
                    // 定义二级路由嵌套
                    <Route index element={<Article />} > </Route>
                    <Route path='board' element={<Board />} > </Route>
                </Route>
                <Route path='/' element={<About />} ></Route>
            </Routes>
        </HashRouter>
    )
}

404页配置

<Routes>
    <Route index element={<Article />} />
    <Route path='board' element={<Board />}></Route>
    // 当所有路径都没有匹配时渲染此路由
    <Route path="*" element={<NotFound />}></Route>
<Routes>

Mobx环境配置

1.安装mobx和mobx-react-lite

yarn add mobx mobx-react-lite
2 具体代码使用: 编写第一个mobx store小案例

import {makeAutoObservable} from 'mobx'
class CounterStore{
    // 1.定义数据
    count = 0
    constructor(){
        // 2.把数据弄成响应式
        makeAutoObservable(this)
    }
    //3.定义action函数（修改数据）
    addCount = ()=>{
        this.count++
    }
}
// 4.实例化
const counterStore = new CounterStore()
export { counterStore }

在App组件中使用mobx数据

import {counterStore} from ''
import {observer} from 'mobx-react-lite' //导入中间件连接mobx react完成响应式
function App(){
    return (
        <div>
            // 渲染store中的count
            {counterStore.count}
            // 点击事件触发action函数修改count
            <button onClick={counterStore.addcount}>+</button>
        </div>
    )
}
// 用observer包裹app
export default observer(App)

Mobx–computed计算属性

import {makeAutoObservable} from 'mobx'
class CounterStore{
    // 1.定义数据
    list = [1,2,3,4,5]
    constructor(){
        // 2.把数据弄成响应式
        makeAutoObservable(this)
    }
    //3.定义计算属性
    get filterList(){
        return this.list.filter(item=>item>2) 计算item大于2的值
    }
   
}
// 4.实例化
const counterStore = new CounterStore()
export { counterStore }

Mobx模块化–拆分子模块创建根模块

创建一个index.js文件合并所有子模块

// 1.导入子模块
import {CounterStore} from ''
import {ListStore} from ''
class RootStore {
    constructor(){
    // 2.对子模块进行实例化
        this.counterStore = new CounterStore()
        this.listStore = new ListStore()
    }
}
// 实例化操作
// 使用react context机制 完成统一方法封装
const rootStore = new RootStore()
// useContext查找机制：优先从Provider value查找，如果找不到就找从createContext方法传递过来的默认参数
const context = React.CreateContext(rootStore)
const useStore = ()=> React.useContext(context)
export {useStore}

在组件中使用数据时

function App(){
    const rootStore = useStore() // 或者使用解构
    return (
        <div>
          {rootStore.counterStore.count}
        </div>
    )
}

Mobx基础使用总结

1.初始化Mobx的过程是怎样的？
声明数据–》响应式处理–》定义action函数–》实例化导出
2.Mobx如何配合react，需要依赖什么包？
mobx-react-list作为连接react，导入observer方法，包裹组件（只能和函数组件配合）；如果是类组件，使用mobx-react
3.模块化解决了什么问题？
维护性问题
4.如何实现mobx模块化？
按照功能拆分store模块，根模块组合子模块，利用context机制依赖注入（全局数据传递）

配置别名路径

1.安装修改CRA配置的包：yarn add -D @craco/craco
2.在项目根目录中创建craco的配置文件：craco.config.js,并在配置文件中配置路径别名

// 添加自定义对于webpack的配置
const path = require('path')
module.exports = {
  // webpack配置
  webpack: {
    // 配置别名
    alias: {
      // 约定使用‘@’表示src文件所有路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

3.修改package.json中的脚本命令

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

4.在代码中，可以通过@来表示src目录下的相对路径
5.重启项目，让配置生效

@别名路径提示

能够让vscode识别@路径并给出提示
实现步骤：
1.创建jsconfig.json配置文件
2.代码实现

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

vscode会自动读取jsconfig.json中的配置，让vscode知道@就是src目录