前端框架对比系列之react和vue搭建

前言

本文将通过介绍并对比react、vue2、vue3框架的搭建流程,了解并掌握完整的项目初始化流程

1. react项目搭建

主要通过 create-react-app 脚手架配合 react-app-rewired 添加一些额外的webpack配置搭建一个基础 H5 项目。更加详细的配置和优化可以参考我的文章 不用 npm run eject,我是这么配置webpack的

1.1 安装

js 复制代码
npx create-react-app react-demo(项目名称,可以自己命名)

1.2 安装相关依赖

js 复制代码
// 安装基本UI库andt-mobile
yarn add antd-mobile
// 安装 react-app-rewired customize-cra 用来添加webpack相关配置,只需要安装在开发环境就好
yarn add react-app-rewired customize-cra -D
// babel-plugin-import这个是分包工具
yarn add babel-plugin-import -D

1.3 修改package.json启动项

js 复制代码
{
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

1.4 在项目根目录创建一个 config-overrides.js 用于修改默认配置

js 复制代码
const { override, fixBabelImports }  = require("customize-cra")
module.exports = override(
    fixBabelImports("import", {
      libraryName: 'antd-mobile',
      style: 'css',
    })
)

1.5 修改app.js

js 复制代码
import { Button } from 'antd-mobile'

function App() {
  return (
    <div className="App">
      <Button type="primary">按钮</Button>
    </div>
  );
}

export default App;

1.6 启动项目,并访问localhost:3000

arduino 复制代码
npm run start

2. vue 项目搭建

2.1 Vue CLI

CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create xxx 快速搭建一个新项目。

2.2 安装CLI

2.2.1 安装命令
js 复制代码
npm install -g @vue/cli

或者

js 复制代码
yarn global add @vue/cli
2.2.2 版本查看
js 复制代码
vue --version

或者

js 复制代码
vue -V
2.2.3 版本升级
js 复制代码
npm update -g @vue/cli

或者

js 复制代码
yarn global upgrade --latest @vue/cli

2.3 创建vue项目

js 复制代码
vue create vue-demo

2.4 选择默认【Vue 2】或者【Vue 3】选项

2.5 启动项目

js 复制代码
npm run serve
// OR
yarn serve
相关推荐
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常6 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程