vscode는 Typescript+React+Dva용 개발 환경을 구축합니다.
- 不言원래의
- 2018-07-09 14:49:232914검색
这篇文章主要介绍了关于vscode搭建Typescript+React+Dva的开发环境，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
[ 作为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+React\1-dva+react_firstday
-
. 使用 dva-cli 创建项目, 创建好的项目目录如下:
dva new 01-dva-quickstart
-
. 安装 typescript 所需的 react, react-dom 包, 以及 ts-loader 和 tslint
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: dva 中 routes 相当于 redux 的 containers(容器组件), 具体相关概念可以参考链接描述 , Home.tsx 的代码如下:
import * as React from 'react';
export interface IAppProps {
name?: string;
};
const Home: React.SFC<iappprops> = (props: IAppProps): JSX.Element => {
return (
<p>
</p>
<h1>
Hello {props.name ? props.name : "崩崩呢"}
</h1>
);
};
export default Home;</iappprops>
3 . 在 ./src/routes 目录下新建 News.tsx ( ./src/routes/News.tsx)(这是二级页面);
import * as React from 'react';
export interface INewsProps {
newslist?: Array;
};
const News: React.SFC<inewsprops> = ( props: INewsProps ): JSX.Element => {
const newslist = props.newslist ? props.newslist : [
{
title: 'title1',
content: 'content1',
}
];
return (
<p>
<nav>
<ol>
<li>{newslist[0].title}</li>
<li>{newslist[0].content}</li>
<li>over</li>
</ol>
</nav>
</p>
);
};</inewsprops>
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 (
<router>
<switch>
<route></route>
<route></route>
</switch>
</router>
);
}
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({}) 中使用了 H5 的 historyAPI, 比较好看;
6 . 在命令行执行npm start, 代码没写错的话,应该就能看到这样的主页
7 . 继续在浏览器地址栏中输入 /news, 即可看到跳转到了 news 页面
第五步 (大功告成)
总结: 崩崩只学了 2 天的 ts,所以就迫不及待的将其融入到了 redux+react
的实践中, 期间踩了不少的坑, 发现 redux 其实对 ts 的支持不是很友好, 所以果断地转向了更加轻
量的 dva, 而网上的对 dva+react+ts 的配置少之又少,而且是过时的东西, 所以分享给大家..., 另外代码没有过多的注释, dva 文档链接描述 已经讲得很详细了, 崩崩觉得没必要再说了!자러 갈 시간이야 코딩을 너무 많이 했으니 프론트엔드 크래쉬는 언제나 마음에 든다!!
위 내용이 전체 내용입니다 이 글이 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
vue-cli 2.x 프로젝트 최적화 - 로컬 정적 라이브러리 파일 소개
위 내용은 vscode는 Typescript+React+Dva용 개발 환경을 구축합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!