资讯专栏INFORMATION COLUMN

记 vscode 搭建 Typescript+React+Dva 开发环境

shaonbean / 3038人阅读

摘要:作为年前端最应该学的技术确实惹火这两天崩崩也是自学了一下并且配置了一个简单的基于的环境由于其他的百度教程都是年或者更早很多已经过时了所以想想还是分享经验给自学的第一步安装推荐使用全局安装第二步安装使用全局安装第三步进入你自己的项目目

[ 作为2018年前端最应该学的技术 ], Typescript 确实惹火, 这两天崩崩也是自学了一下 ts. 并且配置了一个简单的基于 Dva+React+Typescript+Tslint 的环境, 由于其他的百度教程都是 17 年或者更早, 很多已经过时了, 所以想想还是分享经验给自学的friends! 第一步
安装 typescript (推荐使用全局安装)
    npm install -g typescript
第二步
安装 dva-cli(使用全局安装)
    npm install -g dva-cli
第三步

. 进入你自己的项目目录

    cd d:/code/4-Dva+React1-dva+react_firstday

. 使用 dva-cli 创建项目, 创建好的项目目录如下:

    dva new 01-dva-quickstart

. 安装 typescript 所需的 react, react-dom 包, 以及 ts-loadertslint

    npm install --save-dev @types/react @types/react-dom ts-loader ts-lint

. 配置 tsconfig.json ( ts配置项 )

在项目 根目录 下新建 tsconfig.json(./tsconfig.json), 并写入下列必须代码:
    {
        "compilerOptions": {
            "strictNullChecks": true,
            "moduleResolution": "node",
            "allowSyntheticDefaultImports": true,
            "experimentalDecorators": true,
            "jsx": "preserve",
            "noUnusedParameters": true,
            "noUnusedLocals": true,
            "target": "es6",
            "lib": [
                "dom", 
                "es7"
            ]
        },
        "exclude": [
            "node_modules",
            "lib",
            "es"
        ]
    }

. 配置 tslint.json ( tslint规范 )

在项目 根目录 下新建 tslint.json( ./tslint.json), 写入下列必须代码:
(ps:下面的 rules 配置项, 可以自行添加)

    {
        "extends": [
            "tslint:latest",
            "tslint-react"
        ],
        "linterOptions": {
            "exclude": [
                "node_modules/**/*.ts",
                "src/**/*.{ts,tsx}"
            ]
        },
        "rules": {
            "object-literal-sort-keys": false,
            "jsx-no-lambda": false,
            "eofline": false,
            "no-consecutive-blank-lines": false,
            "no-var-requires": false,
            "quotemark": false,
            "space-within-parents": false,
            "no-submodule-imports": false,
            "no-implicit-dependencies": false,
            "ordered-imports": [ false ],
            "jsx-boolean-value": false,
            "no-trailing-whitespace": false,
            "semicolon": false,
            "trailing-comma": false,
            "space-in-parents": false,
            "typedef-whitespace": [ false ],
            "whitespace": [ true ],
            "interface-over-type-literal": true,
            "no-duplicate-imports": false,
            "no-namespace": true,
            "no-internal-module": true
        }
    }

. 至此, ts 的相关配置已经全部完成, 接着该测试一下啦?

第四步
1 . 删除 ./src 目录下的所有文件, 不要删文件夹;
2 . 在 ./src/routes 目录下新建 Home.tsx( ./src/routes/Home.tsx)(默认首页);

Ps: dvaroutes 相当于 reduxcontainers(容器组件), 具体相关概念可以参考链接描述 , Home.tsx 的代码如下:

    import * as React from "react";
    
    export interface IAppProps {
        name?: string;
    };
    
    const Home: React.SFC = (props: IAppProps): JSX.Element => {
        return (
            

Hello {props.name ? props.name : "崩崩呢"}

); }; export default Home;
3 . 在 ./src/routes 目录下新建 News.tsx ( ./src/routes/News.tsx)(这是二级页面);
    import * as React from "react";
    
    export interface INewsProps {
        newslist?: Array<{title: string, content: "string"}>;
    };
    
    const News: React.SFC = ( props: INewsProps ): JSX.Element => {
        const newslist = props.newslist ? props.newslist : [
            {
                title: "title1",
                content: "content1",
            }
        ];
        
        return (
            
); };
4 . 写好了我们的容器组件, 进入到 ./src, 在项目根目录下新建 router.tsx( ./src/router.tsx), 配置我们的路由!
    import * as React from "react";
    
    import { Router, Route, Switch } from "dva/router";
    
    import Home from "./routes/Home";        // 引入 首页 组件
    import News from "./routes/News";        // 引入 二级 页面
    
    export default function RouterConfig ({ history }){        // 路由配置
        return (
            
                 
                     
                     
                 
            
        );
    }
5 . 最后一步, 去到 ./src/ 根目录, 新建 index.tsx(./src/index.tsx ), 并写入如下代码!
    import dva from "dva";
    import createhistory from "history/createBrowserHistory";
    
    const app = dva({
        history: createhistory(),
    });
    
    app.router( require("./router").default );
    
    app.start("#root");

Ps: 由于 dva 的默认路由是 Hash 路由, 崩崩有点强迫, 所以在 const app = dva({}) 中使用了 H5historyAPI, 比较好看;

6 . 在命令行执行  npm start, 代码没写错的话,应该就能看到这样的主页
7 . 继续在浏览器地址栏中输入 /news, 即可看到跳转到了 news 页面
第五步 (大功告成)

总结: 崩崩只学了 2 天的 ts,所以就迫不及待的将其融入到了 redux+react
的实践中, 期间踩了不少的坑, 发现 redux 其实对 ts 的支持不是很友好, 所以果断地转向了更加轻
量的 dva, 而网上的对 dva+react+ts 的配置少之又少,而且是过时的东西, 所以分享给大家..., 另外代码没有过多的注释, dva 文档链接描述 已经讲得很详细了, 崩崩觉得没必要再说了!

要睡觉了, 就码这么多了, 永远热爱前端的崩崩!!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96026.html

相关文章

  • Taro 优秀学习资源汇总

    摘要:多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

    toddmark 评论0 收藏0
  • React的移动端和PC端生态圈的使用汇总

    摘要:调用通过注册表调用到实例,透过的,调用到中的,最后通过,调用,根据参数相应模块执行。京东的,多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术,我们不能停留在五分钟状态,特别喜欢一句话,用什么方式绘制UI界面一点不重要,重要的是底层的思维,解决问题和优化...

    kun_jian 评论0 收藏0
  • React的移动端和PC端生态圈的使用汇总

    摘要:调用通过注册表调用到实例,透过的,调用到中的,最后通过,调用,根据参数相应模块执行。京东的,多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术,我们不能停留在五分钟状态,特别喜欢一句话,用什么方式绘制UI界面一点不重要,重要的是底层的思维,解决问题和优化...

    J4ck_Chan 评论0 收藏0
  • React的移动端和PC端生态圈的使用汇总

    摘要:调用通过注册表调用到实例,透过的,调用到中的,最后通过,调用,根据参数相应模块执行。京东的,多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术,我们不能停留在五分钟状态,特别喜欢一句话,用什么方式绘制UI界面一点不重要,重要的是底层的思维,解决问题和优化...

    Travis 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<