- 综合排序
- 最热优先
- 最新优先
- 来自专栏知道一点点
react项目搭建
1.全局安装脚手架 npm install -g create-react-app 2、创建项目，安装依赖 create-react-app my-react-app 3、进入项目 cd my-react-app 4、启动项目 npm start 5.首先安装路由组件：react-router-dom npm install react-router-dom --save-dev 6.安装 redux 的第三方模块 ： npm install redux --save npm install react-redux --save 7.安装axios npm i axios --s 8.安装 antd npm i antd
61411发布于 2020-08-06 - 来自专栏前端小兵成长营
Vite - 搭建 React 项目
前言 日常放鸽，火钳刘明 这是一个基于 vite 搭建的 React 的项目，开发体验非常棒。 创建一个 Vite 项目 yarn create @vitejs/app ? image.png 如上图，选择了 react-ts 预设模板，如果出现下图一样的工程 ? 那么恭喜你，你可以正常开发 React 项目了。 完结撒花 “如果不行的话，直接看 vite 官网，它比我写的详细 ” ---- 改造工程 但上述只是一个基础的 React demo，在实际开发项目中，是远远不够的，需要额外做一些项目配置 目录约定 根据日常的开发习惯 from 'react' import ReactDOM from 'react-dom' import { HashRouter, Route, Switch } from 'react-router-dom
1.6K20发布于 2021-04-09 - 来自专栏前端知识分享
React---使用react脚手架搭建项目
一、 使用create-react-app创建react应用 1.1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServer …） 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack 创建项目并启动 第一步，全局安装：npm i -g create-react-app 第二步，切换到想创项目的目录，使用命令：create-react-app hello-react 第三步 ，进入项目文件夹：cd hello-react 第四步，启动项目：npm start 1.3. react脚手架项目结构 public ---- 静态资源文件夹 favicon.icon ----- List.jsx 1 import React, { Component } from 'react' 2 import PropTypes from 'prop-types' 3 import
6.6K21发布于 2021-04-23 - 来自专栏技术综合
Cordova+React+Ant.design项目搭建
记录一下搭建 1.安装 $ npm install -g create-react-app cordova yarn 2.新建cordova项目 $ cordova create testdev 可以看到项目结构 image.png 3.在cordova项目根目录创建react项目 $ create-react-app src 对 ，就叫src，舒服 然后再安装 ant.design mobile $ yarn add antd-mobile $ yarn add babel-plugin-import react-app-rewired --dev 4.进入src目录，修改package.json "scripts ": { "start": "react-app-rewired start", "build": "react-app-rewired build && ((robocopy . 'css' }], config); return config; }; 6.开发时，使用 $ yarn start 7.手机调试使用 在src目录下 $ yarn build 在cordova项目根目录下
1K10发布于 2020-08-25 - 来自专栏前端人人
React项目配置3(如何管理项目API接口)
1、React项目配置1(如何管理项目公共js方法)---2018.01.11 2、React项目配置2(自己封装Ajax)---2018.01.12 3、React项目配置3(如何管理项目API接口) ---2018.01.15 4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16 5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17 6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18 7、React项目配置6(ES7的Async/Await的使用)---2018.01.19(新增) 开发环境:Windows 0, end: 20 }, data => console.log(data), data => console.log(data.code)) } 今天我们来讲下，如何管理项目 3、有时候需要验证用户身份，我们可以在这里api加上token 一般我们登录完之后，会把 token存在本地 cookie中 我们安装第三方依赖 npm i -S react-cookie@0.4.6
3K50发布于 2018-04-11 - 来自专栏IT架构圈
React Native 环境搭建和创建项目(Mac)
搭建基本环境（必要） 使用React Native开发iOS应用需要OSX系统，Xcode，Homebrew，node，npm，也可以有选择的使用watchman 、Flow。 1. 安装Flow.png 3. React Native开发之IDE 可以直接用自己喜欢的编辑器进行编辑。 React Native官方推荐了三种IDE编写React Native应用: 1)Atom和Nuclide 2)WebStorm 3)Sublime Text 4) VSCode＋React Native 运行项目 命令行运行项目 // 视情况而定，总之进入项目根目录 cd AwesomeProject // 运行iOS项目 react-native run-ios 接下来就是一连串反应，截图如下， 虚拟机运行成功截图.png 补充： 若是调试安卓版本：（需要安装好安卓SDK、配置环境等） // 运行安卓项目 react-native run-android 3.
2.6K30发布于 2018-06-01 - 来自专栏main方法
React开发环境搭建、项目创建、命令使用
文章目录 前言 一、Node.js下载安装 二、创建React项目 三、React项目常用npm命令使用 总结 ---- 前言 由于项目组前端紧缺的原因，一个后端开发安排了前端开发任务，之前有用过VUE 开发过后端页面，这么说来还是有经验的，借此记录一下React开发环境搭建过程。 二、创建React项目 ① 安装创建React项目的模块cnpm install -g create-react-app ? ② 切换到项目空间目录，创建React项目 react-demo，输入创建命令create-react-app react-demo在当前目录下创建。 ? npm run build 打包构建项目（构建成静态文件） ---- 总结 本章详细介绍从React环境搭建到项目创建以及常用命令使用说明，这些都是准备学习、开发React必需要掌握的技能，所谓磨刀不误砍柴功就是这么个道理
5.7K10发布于 2020-12-07 - 来自专栏random
基于webpack4搭建的react项目框架
介绍 框架介绍，使用webpac构建的react单页面应用，集成antd。使用webpack-dev-server启动本地服务，加入热更新便于开发调试。 使用bundle-loader进行代码切割懒加载 手动搭建，不使用cli，大量注释适合初学者对webpack的理解学习，对react项目的深入了解 启动 git clone https://gitee.com /wjj0720/react-demo.git cd react-demo yarn yarn start 打包 yarn build 目录结构 +node_modules -src /Home"; // 组件使用 因为组件懒加载 是通过异步的形式引入 所以不能再页面直接以标签的形式使用 需要做使用封装 import React, {Component} from 'react </Provider> // 然后组件调用 只需要在组件导出时候 使用connent链接即可 import React, {Component} from 'react' import
98630发布于 2019-09-11 - 来自专栏全栈私房菜
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」3. 资源模块
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」3. generator: { filename: 'static/[hash][ext][query]' }, }, 接下来我们在src/index.tsx中引入图片： import React from 'react'; import ReactDOM from 'react-dom'; import jpg from '. /p>
</> ); }; ReactDOM.render( <React.StrictMode > <App /> </React.StrictMode>, document.getElementById("root") ); 由于这里我们通过 ES6 的方式导入图片，为了使 TypeScript
1.1K20编辑于 2022-10-24 - 来自专栏全栈程序员必看
react项目实战教程(react项目实战)
文章目录 项目实战前的准备工作 React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面 1-2配置路由 1-3需要最外层去渲染路由视图 1-4需要配置内层App 路由 1-5 路由的懒加载 项目实战前的准备工作 React基础 React组件 React-Router——Reac路由的学习 React高阶组件及CRA的定制 React中使用Antd组件 React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面 在项目根目录src文件下创建views文件夹 然后在views文件夹里创建所需要页面, ArticleEdit }, { pathname:"/admin/settings", component:Settings }, ] 1-3需要最外层去渲染路由视图 在src/index.js文件里渲染路由视图 import React from 'react'; import ReactDOM from 'react-dom'; import App from
3.1K50编辑于 2022-07-28 - 来自专栏前端资源
从零开始搭建一个React TypeScript项目
最近开始使用 React 和 TypeScript 开发项目了，顺便整理一下 react-ts 项目的创建过程。 node/npm 这些基本的东西就不再赘述了，没有的自行安装一下。 创建项目 参考 官方文档 npx create-react-app my-app --template typescript 启动项目 cd my-app //进入项目目录 npm run start 目录调整 创建完成后项目目录是这样的，有点乱。 'D:/react/hao-w3h5-react/node_modules/react/index.js' implicitly has an 'any' type. 未经允许不得转载：w3h5 » 从零开始搭建一个React TypeScript项目
7.4K30发布于 2021-07-06 - 来自专栏个人路线
React Native → HarmonyOS环境搭建与项目初始化
环境搭建与项目初始化（React Native → HarmonyOS） ⚙️ 配置 RNOH 开发环境（macOS 版本） ✅ 目标：完成 DevEco Studio 安装、HDC 环境配置、CAPI 目标：创建工程 → 安装鸿蒙化依赖 → 生成 Harmony bundle 适用版本：React Native for OpenHarmony 仅支持 0.72.5 创建新项目 可选择一个目录，使用 React Native 内置 CLI 创建一个名为“RnohSample”的新项目。 可添加 --skip-install 跳过，稍后按需自行安装，不影响鸿蒙项目开发。 新建工程中集成 React Native 步骤一：创建鸿蒙项目有两种形式，任选其一。
51910编辑于 2025-12-31 - 来自专栏Web行业观察
Vue 3 CLI 技术项目搭建说明
通过以下命令全局安装 Vue CLI： npm install -g @vue/cli 安装完成后，可以通过以下命令检查 Vue CLI 的版本： vue --version 二、创建 Vue 3 项目 使用 Vue CLI 创建一个新的 Vue 3 项目非常简单。 为了使用 Vue 3，我们需要手动选择特性，并确保选择了 Vue 3 版本。 Vue CLI v4.5.13 ? x (Preview) 完成选择后，Vue CLI 会开始创建项目，并自动安装所需的依赖。 三、项目结构 创建完成后，进入项目目录并启动开发服务器： cd my-vue3-project npm run serve 项目的基本结构如下： my-vue3-project/ ├── node_modules
57310编辑于 2024-12-06 - 来自专栏技术综合
vue3+webpack项目搭建实验
源码地址: https://github.com/klren0312/vue3-webpack 文件目录 ├── build | ├── webpack.base.js | ├── webpack.dev.js 初始化项目 mkdir vue3Test cd vue3Test yarn init -y 2. 安装依赖 a. 安装 vue3 yarn add vue@next b. /dist') }, module: {}, mode: 'development' }) 3. 75 } } }, ], }] } }) 代码测试 https://klren0312.github.io/vue3- const increment = e => { console.log(e) count.value += 10 state.message = 'Vue3.
2.9K20发布于 2020-08-25 - 来自专栏前端导学
使用vite+vue3搭建项目
npm i create-vite-app -g create-vite-app vue3demo cd vue3demo npm i npm run dev 查看vue-router最新版本 npm 安装sass npm i sass -D 安装完了之后 不需要额外配置，可以直接使用 源码地址 https://github.com/lilugirl/vite-vue3-boilerplate/tree
1.2K30发布于 2020-12-08 - 来自专栏农民工前端
VUE3+TS学习-项目搭建
x 搭建vue3的项目，需要依赖VUE-CIL 3.0或者更高版本。 新建项目步骤 vue create <vue name>//新建项目代码 图例是创建名叫vue3learn的vue3的项目 回车后返回： Default：默认的预设配置，会快速构建一个项目，提供了 babel和eslint的支持（第一个‘([Vue 3] babel, eslint)’vue3的项目） Manually select features：手动进行项目配置，可以根据项目的需要选择合适的依赖 可选择方法一： 直接使用默认的vue3预设配置： $ cd vue3learn//进入项目 $ npm run serve//启动项目 将地址复制到浏览器： 至此，默认配置情况下的vue3项目配置完成 ： 至此，默认配置情况下的vue3项目配置完成。
1.2K20编辑于 2022-12-21 - 来自专栏前端开发随笔
Vue3+Vite上手搭建项目
构建命令 npm init vite-app <project-name> cd <project-name> npm install npm run dev 打包上线 先在文件夹根目录创建vite.
1.1K20发布于 2020-12-21 - 来自专栏clz
React搭建规范
创建项目 npx create-react-app react-standard-f –template typescript 1. prettier yarn add prettier –dev space-before-function-paren': 'off', '@typescript-eslint/strict-boolean-expressions': 'off' } 3. '**/*.jsx', '**/*.tsx', '**/*.ts', ], }; 添加脚本 package.json "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts {css,scss,less}\"" }, 5. husky 和 lint-staged npx husky-init 安装 husky 到开发依赖 在项目根目录下创建 .husky 目录 在
52350编辑于 2023-10-23 - 来自专栏江涛的博客
React环境搭建
利用React脚手架create-react-app搭建项目 编写一个React计数组件 利用React脚手架create-react-app搭建项目 这里笔者例举两种利用create-react-app 搭建项目的方式 全局安装 npm i -g create-react-app create-react-app my-app cd my-app && npm start npx安装 npx create-react-app npm i -g create-react-app只需要执行一次，后面你在任意目录执行create-react-app project就可以创建一个react项目的脚手架，这免去了开发者很多配置的工作。 npx安装需要的npm版本在5.2.0以上，它的原理大致是先去全局的node_modules下找找看有没有这个包，没有的话再去本地项目找找有没有这个包，还是没有就去远程拉一个最新的下来。 ('root') ); 至此我们已经学会了搭建React项目，并能够设计简单的React组件。
1.9K20发布于 2020-07-24 - 来自专栏用代码征服天下
Vue CLI 3.x搭建Vue项目
查看安装成功否（有版本号就是成功，V大写） vue -V 三、vue-cli搭建vue项目 执行如下命令即可（注意该命令跟vue-cli2.x不同）。 Manually select features：手动配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的npm包。 为了方便稍后跟用vue-cli2.x创建的项目结构作对比，我们这边仅添加Router而不添加Vuex。 简单介绍一下各个参数含义： ? (Y/n) // y:记录本次配置，然后需要你起个名; n：不记录本次配置 搭建完成后，依次执行 cd my-project 和 npm run serve 即可访问vue默认的demo页面。 参考博客：https://www.wenyuanblog.com/blogs/vue-cli3x-to-create-vue-project.html
1.2K10发布于 2019-12-30
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号