美文网首页
umi框架搭建

umi框架搭建

作者: 月下丶初雨 | 来源:发表于2020-08-19 14:04 被阅读0次

    环境准备

    首先由node环境,确保node版本是10.13或以上(mac下推荐使用nvm来管理node版本)

    $ node -v
    v14.8.0
    

    推荐使用 yarn 管理 npm 依赖,并使用国内源(阿里用户使用内网源)。

    # 国内源
    $ npm i yarn tyarn -g
    # 后面文档里的 yarn 换成 tyarn
    $ tyarn -v
    # 阿里内网源
    $ tnpm i yarn @ali/yarn -g
    # 后面文档里的 yarn 换成 ayarn
    $ ayarn -v
    

    脚手架

    先找个地方建个空目录。

    $ mkdir umi-react && cd umi-react
    

    通过官方工具创建项目

    $ yarn create @umijs/umi-app
    # 或 npx @umijs/create-umi-app
    Copy:  .editorconfig
    Write: .gitignore
    Copy:  .prettierignore
    Copy:  .prettierrc
    Write: .umirc.ts
    Copy:  mock/.gitkeep
    Write: package.json
    Copy:  README.md
    Copy:  src/pages/index.less
    Copy:  src/pages/index.tsx
    Copy:  tsconfig.json
    Copy:  typings.d.ts
    

    安装依赖

    $ yarn
    yarn install v1.21.1
    [1/4] 🔍  Resolving packages...
    success Already up-to-date.
    ✨  Done in 0.71s.
    

    启动项目

    $ yarn start
    Starting the development server...
    ✔ Webpack
      Compiled successfully in 17.84s
     DONE  Compiled successfully in 17842ms                                       8:06:31 PM
      App running at:
      - Local:   http://localhost:8000 (copied to clipboard)
      - Network: http://192.168.12.34:8000
    

    在浏览器里打开 http://localhost:8000/,能看到以下界面

    TB1JpeLwxD1gK0jSZFsXXbldVXa-1540-950.png

    相关文章

      网友评论

          本文标题:umi框架搭建

          本文链接:https://www.haomeiwen.com/subject/qoirjktx.html