美文网首页随笔-生活工作点滴
windows下用npm创建第一个typescript的 ant

windows下用npm创建第一个typescript的 ant

作者: 何蒙其实很好 | 来源:发表于2019-07-05 10:17 被阅读0次

    此处我参照https://ant.design/docs/react/use-in-typescript-cn使用npm创建一个ant design项目

    请保证安装安成npm, 此处不描述npm的安装

    安装create-react-app:

    npminstall-gcreate-react-app

    创建基于typepscript的react项目, 项目名取为antd-demo-ts:

    create-react-app antd-demo-ts--scripts-version=react-scripts-ts

    正在生成

    创建完成

    检查src下的文件, 看是否有.tsx和ts, 不要有js--有js说明你创建的并不是ts项目 (我因为手敲上面的命令, 创建很多次, 结果发现都是js。所以如里发现这下面是js只说明你手敲出错, 请复制上面的命令, 重来), 正确的src下的格式如下图:

    测试react项目:

    cd antd-demo-tsnpmstart

    浏览器看到如下界面(http://localhost:3000/), 说明react项目创建成功

    引入antd:

    npmaddantd

    测试antd组件

    app.tsx代码:

    import*asReactfrom'react';importButtonfrom'antd/lib/button';import'./App.css';classAppextendsReact.Component{  render() {return(Button);  }}exportdefaultApp;

    上面的代码分号不能陋, 下面是我陋掉11行的分号的报错:

    app.css

    @import'~antd/dist/antd.css';.App{text-align: center}

    测试结果:

    npmstart

    运行结果:

    相关文章

      网友评论

        本文标题:windows下用npm创建第一个typescript的 ant

        本文链接:https://www.haomeiwen.com/subject/prkshctx.html