摘要:作為年前端最應該學的技術確實惹火這兩天崩崩也是自學了一下并且配置了一個簡單的基于的環境由于其他的百度教程都是年或者更早很多已經過時了所以想想還是分享經驗給自學的第一步安裝推薦使用全局安裝第二步安裝使用全局安裝第三步進入你自己的項目目
[ 作為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-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= (props: IAppProps): JSX.Element => { return ( ); }; export default Home;Hello {props.name ? props.name : "崩崩呢"}
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({}) 中使用了 H5 的 historyAPI, 比較好看;
6 . 在命令行執行 npm start, 代碼沒寫錯的話,應該就能看到這樣的主頁
7 . 繼續在瀏覽器地址欄中輸入 /news, 即可看到跳轉到了 news 頁面第五步 (大功告成)
總結: 崩崩只學了 2 天的 ts,所以就迫不及待的將其融入到了 redux+react
要睡覺了, 就碼這么多了, 永遠熱愛前端的崩崩!!
的實踐中, 期間踩了不少的坑, 發現 redux 其實對 ts 的支持不是很友好, 所以果斷地轉向了更加輕
量的 dva, 而網上的對 dva+react+ts 的配置少之又少,而且是過時的東西, 所以分享給大家..., 另外代碼沒有過多的注釋, dva 文檔鏈接描述 已經講得很詳細了, 崩崩覺得沒必要再說了!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96026.html
摘要:多端統一開發框架優秀學習資源匯總官方資源項目倉庫官方文檔項目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節跳動小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學從到構建適配不同端微信小程序等的應用小程序最 Awesome Taro 多端統一開發框架 Taro 優秀學習資源匯總 showImg(https://segmentfault.com/img/r...
摘要:調用通過注冊表調用到實例,透過的,調用到中的,最后通過,調用,根據參數相應模塊執行。京東的,多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術,我們不能停留在五分鐘狀態,特別喜歡一句話,用什么方式繪制UI界面一點不重要,重要的是底層的思維,解決問題和優化...
摘要:調用通過注冊表調用到實例,透過的,調用到中的,最后通過,調用,根據參數相應模塊執行。京東的,多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術,我們不能停留在五分鐘狀態,特別喜歡一句話,用什么方式繪制UI界面一點不重要,重要的是底層的思維,解決問題和優化...
摘要:調用通過注冊表調用到實例,透過的,調用到中的,最后通過,調用,根據參數相應模塊執行。京東的,多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術,我們不能停留在五分鐘狀態,特別喜歡一句話,用什么方式繪制UI界面一點不重要,重要的是底層的思維,解決問題和優化...
閱讀 6179·2021-11-22 15:32
閱讀 813·2021-11-11 16:54
閱讀 3157·2021-10-13 09:40
閱讀 2162·2021-09-03 10:35
閱讀 1824·2021-08-09 13:47
閱讀 1865·2019-08-30 15:55
閱讀 1933·2019-08-30 15:43
閱讀 2455·2019-08-29 17:06