美文网首页前端开发 从基础到框架
reacte项目创建与基本配置

reacte项目创建与基本配置

作者: 不7而遇_ | 来源:发表于2019-03-26 11:53 被阅读10次

    最近一直都在用vue 所以react项目就不是那么清晰了。所以决定在从新用create-react-app 来创建项目

    首先要安装 create-react-app

    cnpm i create-react-app -g
    

    然后在通过

    create-reatc-app viga  //viga是项目名称 可以自行替换成你的项目名
    

    来创建项目,这里viga 是项目名称

    第二种方式 你可以直接像react官网一样用创建项目

    npx creact-react-app viga
    

    这里的npx不是错误语句, 它是 npm 5.2+ 附带的 package 运行工具

    此时的项目目录是这样的


    初始创建目录

    这时我们可以运行

    npm run eject
    

    这句话的作用是弹出配置文件 操作不可逆转 弹出提示 后 输入 y

    这时的项目目录就会变成


    有配置项的目录

    接下来我们需要进行基本的配置

    首先我们可以先安装sass 或者 less

    npm i sass sass-loader -S
    

    用到的UI框架是antd-mobile 在官网是有教程的
    首先先要安装antd-mobile

    $ npm install antd-mobile -S
    

    修改package.json 文件中的babel

    {
      "plugins": [
        ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件
      ]
    }
    
    • 更改引用方式
    - import Button from 'antd-mobile/lib/button';
    + import { Button } from 'antd-mobile';
    

    这里可以在vscode 中安装插件 reactjs code snippets
    这样可以通过简写rcc来迅速搭建项目
    react页面与路由教程

    相关文章

      网友评论

        本文标题:reacte项目创建与基本配置

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