还是想点做点记点吧，不然太忙真容易谎
跑起来再说
一时半会的 不用脚手架 还有点手忙脚乱的，得益于vue-cli清晰的构建结构，稍加更改就能跑react了
vue-cli更改清单
卸载vue及vue-loader相关loader
-
依赖包变更 package.json
Paste_Image.png
-
构建文件变更 base.conf.js和prod.conf.js
//base.conf.js
vue: {
loaders: utils.cssLoaders()
}//删掉
//prod.conf.js
vue: {
loaders: utils.cssLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
}//删掉
- 程序变更
- 页面 index.html 建一个挂载点 <div id="app">
- 入口 使用了material-ui(最快的方法就是看人家怎么写的_) 当然你可以自己写个临时的HelloWorld型组件
import React from "react"
import ReactDOM from "react-dom"
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import injectTapEventPlugin from "react-tap-event-plugin"
import ThreadList from "./components/ThreadList"
injectTapEventPlugin();
const App = () => (
<MuiThemeProvider>
<ThreadList />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
npm run dev
开发私服.png
就这么简单的没心没肺的跑起来了
list组件示例.png
题外话总结一下 如果你要使用一个现代"框架"搭建一个可开发、可维护、可扩展、可实用的任何 web程序 大致需要做到以下（圈红的只是说明我上面改动的文件位置）
不用动结构.png
- 构建模块 --- webpack
- 开发模块 --- dev调试私服
- mock模块 --- 本例子中没加 fms可选
- 规范模块 === 本例子中没加 eslint可选
- 测试模块 === 本例子中没加 mocha可选
- 源码包 --- src (assets,components,template,main.js)
- 非编译资源包 --- static 会直接打包到发布路径 可选
- 版本管理 --- 本例子中没加 git (推荐下gitup)
快速过渡的准备
- 先把react的原理抛一边去,任何想有发展的类库都是为了工业化生产的,被广泛快速的使用是它的第一个目标，so 它一定文档够分量。很多朋友都喜欢<strong>一言不合掀源码</strong>。确实，能快速的深入核心，了解实现原理对性能优化、避坑、填坑有很大的帮助，然而时间紧任务重，先用着。
- 之前用过类似东东,比如vuejs。从react的官网一眼就明白这哥们也是基于组件理念，那还说什么了……掌握封装组件😊就掌握了大头
ps:“Learn Once Write Anywhere” 这句话听着耳熟-_-#
Paste_Image.png
3.需要一份思路
无论是什么鬼，跑不出去三大件
- 数据绑定
- 组件封装
-
交互通信
(当然状态管理也很重要 可惜是后话了)
JSX(泥巴) Components(泥板子) 重点攻入 其他的优先级不高（别吃太多 容易吐🐰）
Paste_Image.png
Docs中的Guides和Reference非常重要,教程帮助你入坑理解，指南告诉你怎么在坑里呆的舒服
Paste_Image.png
Paste_Image.png
行了开始吧
文件结构，构建有了；文档也在手边了；可以开始了！
为毛不用vue 和 react一起对比写呢ˊ>ˋ 嗯就这样Y(^^)Y
一个简单的官网示例 用vue和react分别来写，注意在官网中react时间改变是通过定时render，为了和vue做对比 将其改为组件内部行为 也体现了两者的些许不同。
Paste_Image.png
vue2.0 改进了组件生命周期移除了 ready 新增了mounted
效果
是的 先睡……明天还有事 周末更一更～
网友评论