前端开发 从基础到框架

reacte项目创建与基本配置

2019-03-26  本文已影响10人  不7而遇_

最近一直都在用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页面与路由教程

上一篇 下一篇

猜你喜欢

热点阅读