构建react项目

标签：React const less 项目 react craco 构建 import

1 ，建立工程的2种方式

1）用npm  npx react-create-app xxx

2) 用脚手架  creacte-react-app xxx【推荐】

 

2， 更换项目图标和title(属于公共的东西在public文件夹里面）

  public/favicon.ico

  public/index.html

 

3，创建react函数组件代码片段

文件->首选项->设置用户代码片段->全局->.vscode\rmc.code-snippets

{     "全局React函数组件模板": {         "scope": "javascript,typescript,javascriptreact,typescriptreact",         "prefix": "rmc",         "body": [             "import React, {memo} from 'react';",             "",             "const ${1:App}= memo(() => {",             "return (",             "",             "<div>${1:App}</div>",             ")",             "})",             "",             "export default ${1:App}",             ""         ],         "description": "React函数组件默认模版"     } }   4，增加jsconfig.json  增加智能提示 {   "compilerOptions": {     "target": "es5",     "module": "esnext",     "baseUrl": "./",     "moduleResolution": "node",     "paths": {       "@/*": [         "src/*"       ]     },     "jsx": "preserve",     "lib": [       "esnext",       "dom",       "dom.iterable",       "scripthost"     ]   } }   5 ，craco【create-react-app-config】工具配置别名（react脚手架隐藏webpack） 1)安装 npm install @craco/craco@alpha -D 2)创建craco.config.js const path=require('path') const resolve=pathname=>path.resolve(__dirname,pathname) module.exports={     //webpack     webpack:{         alias:{             '@':resolve('src'),             'components':resolve('src/components'),             'untils':resolve('src/untils')         }     } } 3）更改启动方式package.json "scripts": {     "start": "craco start",     "build": "craco build",     "test": "craco test",     "eject": "react-scripts eject"   }, //当执行npm run start  就会用craco启动项目  ，将自定义craco配置和webpack原来的配置做个合并  craco配置就生效了   6 ，配置less

Ant Design样式库（react ui框架）NO.1

官网：https://4x.ant.design/docs/react/use-with-create-react-app-cn

配置craco-less

安装：npm i [email protected]

craco.config.js

引入：const CracoLessPlugin = require('craco-less');

module.exports对象中增加

plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ],

7，样式重置

normalize.css  ->直接安装 npm install normalize.css 在index.js中引入

asset/css

variables.less  定义less变量

@textColor：'#484848'

@textColorSecondary：'#222'

reset.less

可以使用less变量

导入@import './variables.less'

indes.less 作为css的统一导入文件 @import './reset.less'

在index.js中引入

8，配置路由

安装：npm install react-router-dom

1）index.js 全局引入

import React,{Suspense} from 'react';

import {HashRouter} form 'react-router-dom';

 <Suspense fallback='loading'>     <HashRouter>       <App />  </HashRouter> 2）定义路由 route/routes.js import React from "react"; import { Navigate } from "react-router-dom";
const Home = React.lazy(() => import("@/view/home")); const Detail = React.lazy(() => import("@/view/detail")); const Entries = React.lazy(() => import("@/view/entries")); const routes = [     {         path: '',         element: <Navigate to='/home'/>     },     {         path: '/home',         element: <Home/>     },     {         path: '/detail',         element: <Detail/>     },     {         path: '/entries',         element: <Entries/>     },
]; export default routes;   3）在App.js中使用路由 import { useRoutes } from 'react-router-dom'; import routes from '@/router'; function App() {   return (     <div className="App">       {useRoutes(routes)}     </div>   ); }
export default App;

 

 

   

 

标签：React,const,less,项目,react,craco,构建,import
From： https://www.cnblogs.com/fanjiawen/p/18186420