第四章:React环境配置之Umi脚手架

项目搭建

初始化项目

创建方式

手动创建
手动新建文件夹,并使用vscode打开此文件夹
输入命令: yarn init -y -y表示:遇到的所有询问全部选择Yes选项

命令创建
   mkdir myapp        #myapp:项目名称;创建项目文件夹 ,注意使用时,先确定你的项目放在哪个盘那个文件夹下
   cd myapp           #进入创建的项目根目录下(此时项目文件夹是空的)
   yarn init          #执行初始化操作
当项目中出现package.json时,初始化成功!

简介:
官方简介:可插拔的企业级反应应用程序框架。
个人理解:如果把做项目当成是一次盖房子,那么我们就是房主,而我们所用到的技术可以理解为是为了盖这个房子我们请来的实际工作者或者通俗的说叫小工,而小工又分为专职的瓦匠,水电,木工,等等,他们各自负责各自的事情,都有专业精通,我们请他们来,就是看中了他们的专业是我们盖房子的时候用的上的.
例如,我们请来了瓦匠JQuery,土木基建工C#,绿化工Bootstrap,水电工ajax等等
那么umi是什么工种呢?
在以往,大多数情况下,我们会单独与他们签约并使用他们的能力,我们自己对他们的协作进行调配,偶尔还会发生双方互不服管的情况.
那么,这个时候有人过来说,你把这些人都交给我,我帮你管理,那,这个人就是umi.包工头umi
umi自己本身并不会完成什么工作,但是他会制定一些统一规范(比如路由),并和房主商量,由房主决定需要哪些功能,留下哪些工种
至此,既然umi是包工头,那么,这些零散的小时工如何完成工作呢?这就有了umi和小时工们签订的合同了(config/config.js),小时工们将不在需要和房主签订合同,而是由管理他们的umi包工头签订,而包工头则和房主签订合同,房主描述想要建成的效果和提供房屋信息(package.json),用到某功能时,通知umi,umi再把小时工叫来工作.
看起来是不是好像多了步骤?觉得反而多此一举了?其实不然,如果没有包工头你将和每一个工种进行交涉,而现在你不需要知道小时工是如何和umi交涉的,尽情的支配他们去干活即可!
但umi并不是能和任何一个模块签订合约,目前用的最多的是React和Antd
简单来说其实就是umi封装和制定了一些常用的功能而已!并且在使用时可以调整功能模块!
以上分析仅为个人比喻和理解,如有和现实不通或者错误者,可指正,但请勿深究!

安装
- 说明:
  此处文档安装方式并不和官网一致.
  因为我们目的是为了,彻底摸透umi框架和后续的react相关技术,所以从最基础,最底层的,最LOW,最费事的方法一步一步慢慢构建!
  知其然!知其所以然!!!
- 命令
```
   yarn global add umi           #全局安装umi
   umi -v                        #输出umi版本号,若有则全局安装成功,若无则失败
   yarn add umi --dev            #将umi安装到当前项目并设置为开发模式安装
```
第一步是为了能够打出umi的命令,第3步是为了加载到项目,否则只执行第三步,可能会出现umi不是有效的可执行命令的警告提示!
- 安装成功后文件生成
  生成 node_models文件夹,并且内容中有 umi的相关文件
  生成 yarn.lock文件,yarn的版本锁定配置文件
  package.json文件中的 devDependencies 节点新加入umi的版本信息
  以上是正确配置后出现的文件变动,若未出现,请重新审查你的Yarn的配置
根据大版本变动或许会有新的规则,以新版本为准
初始化umi项目
一: 上面的操作已经将一个空白项目变成了umi项目,但还需要初始化和配置一些基础功能
二: 这一节主要讲能够运行页面的最基础的配置,关于更深层次的内容,后面再详细分解
三: 主要是三个部分的修改, config.js,package.json,页面
- 新建源码页面文件(page)
  注意: 你新建的页面和你的路由息息相关,如果路由找不到页面会报404
1. umi路由的默认约定为:源码文件在 src>pages目录下
2. 所以我们在根目录下新建 src>pages目录结构
3. 如果你不喜欢 pages这个名字的话,可以在config中添加singular: true,然后你就可以写成 page了(如果你喜欢且有必要的话)
  config.js代码
```
      export default {
         singular: true,//将默认的pages修改为另一个默认page
      }
```
1. 现在假设有我们有个首页,那么他的路径应该是 src/pages/home/index.js
  src/pages是umi路由约定的格式,
  home这是react的万物皆组件思想的产物,所以 home在这个环境中是以组件存在的(react篇会有详细讲解)
  index.js这是约定,每个组件的入口文件必须是index.js
2. 将以下内容写入inde.js
  index,js代码
```
   export default()=>{
       return <div>hello home</div>
   }
```
- 新建配置文件(config.js)
  1.在根目录下,新建 config配置文件夹
  2.在 config文件夹下,创建 config.js文件
  config.js代码
```
   //先简单写上,在项目编写阶段,补充内容
   //前面讲,这个地方是umi和各个模块(工种)签的合同的内容,可以看见umi和谁签的约,并约束其使用哪些功能,按需调配
   //还有前面讲的umi制定的一些行为规范[路由]的内容也在这里配置.
   //这份合约其实讲了两件事
   //1:房主和umi包公头的合约[routes][plugins]这些节点是umi干的功能,routes就是umi的路由(规范)
   //2:umi和各个组件(工种)的合约[plugins]下的[dva,antd等]是各个组件的签约情况,不要的工种不签(不写)
   export default{
       routes:[
           {
               path:"/",
               component:"./home"
           }
       ]    
   }
```
- 修改项目信息配置文件(package.json)
1. 在根目录下找到package.json文件
2. 如果你没有执行过yarn init或者不是别人写好的项目的话,不会有这个文件呦!(请参考 初始化项目章节)
3. npm和yarn创建的项目可能package.json有细微的差别,但不用担心,填完后其实是一样的.
  npm创建的项目自带了 scripts节点,而 yarn创建的没有.
4. 配置简单说明:
  json格式中不能写注释
  scripts:指定项目的运行脚本命令
  go表示运行umi的 umi dev启动程序命令
  build表示运行umi的 umi build打包程序命令
5. 所以,我们需要手动的添加上 scripts节点,内容如下:
```
   "scripts":{
       "go":"umi dev",
       "build":"umi nuild"
   }
```
1. 顺带一提!
  还记得 devDependencies节点吗?回顾一下,如果你的配置正确的话,那么应该此时会看见以下信息
```
   "devDependencies": {
       "umi": "^2.8.11"
   },
```
1. 运行程序
  至此我们用umi脚手架搭建的项目的就简单配置完了,暂且先不要问为什么!在后章会有每个配置文件的详细解析,以及在回顾过去的章节中会告诉大家为什么要费这么大的力气去学习使用和研究这些新的看起来很复杂框架.记住,每一个新技术出现都是为了解决过去技术的不足和瓶颈!
- 开始运行不明所以的简陋的项目吧!
- 命令:
- yarn run go,
- 咦?没有报错但也没效果?
- 我们用的是vscode开发工具,这个命令只是将服务启动,但并不能像强大的vs那样,直接调用浏览器给你展示出来!
- 所以打开浏览器输入http://localhost:8000/;这个端口8000是Node.js设置的端口[修改方法]
- 如果出现了hello home,那么恭喜你,成功了!

总结

如你按教程运行成功,也先别高兴太早,这只是个入门而已,如果你在教程中有太多为什么?想问的话,先别着急,虽然只是简单的搭建个项目,但是牵扯的内容其实还是挺多的.
如果想搞透彻,这些必须每一块每一块的拆开了,碾碎了,嚼透了的拆开讲,如果一次全加进去,我累,你们也会被搞晕,以后,我们就带着三连问
是什么? 干什么? 为什么?

posted @ 2020-06-10 14:22 红楼梦中梦阅读(499) 评论(0) 收藏举报

刷新页面返回顶部

红楼梦中梦

第四章:React环境配置之Umi脚手架

项目搭建

初始化项目

Umi脚手架

总结

公告