（一）Vue和React的编码方式对比----基础起步篇

Meepo哦吼

已于 2022-08-19 20:22:28 修改

阅读量360

点赞数 2

分类专栏： Vue和React的编码方式对比文章标签： react.js vue.js

于 2022-08-19 19:40:32 首次发布

本文链接：https://blog.csdn.net/a15201220269/article/details/126424438

版权

Vue和React的编码方式对比专栏收录该内容

6 篇文章 1 订阅

订阅专栏

很多人会将现在流行的三大框架进行对比，性能也好，写法也好总会有人比，这时有人会问为什么只介绍Vue和React呢？

你看看现在用Angular的多不？我反正看招聘基本都是Vue和React，尤其是React近期占比明显增加。（再说了，这世道，前端这么卷，不会两个主流好意思出来混嘛）

系列专题使用的都是Vue2，大家也都知道Vue2和Vue3的写法也是有区别的，后期也会出一些这两个大版本的使用对比。

开始吧，赖斯狗~

一、安装脚手架及创建项目

既然是基础起步，肯定是先从安装开始，咱一步步来，不着急。首先呢，先要安装脚手架，React的脚手架叫做create-react-app，vue的叫vue-cli3，这两个脚手架都需要在node环境下使用npm或者yarn安装，淘宝镜像也行，大家随意

1. 安装react脚手架创建项目

// 全局安装，方法1，使用npm
npm install create-react-app -g

// 全局安装，方法2，使用yarn
yarn global add create-react-app

这两种都行，任选其一。但是有个缺点，没法保证每次都用的最新的
除非你每次都更新，我是不爱用，麻烦，所以我推荐下面的方式

npx create-react-app hello-react

我没写错，就是npx，在npm5.2版本以后会内置这么个东西，简化安装，相当于直接调用最新的包并创建react项目。

还是这个比较方便吧，一步到位，当你看到下面的样子的时候，证明项目已经创建完了

然后只需继续进入项目文件夹，并启动项目

cd hello-react
npm start
// 或
yarn start

我们就成功的看到了这个转来转去的React Logo

2. 安装vue-cli3脚手架创建项目

跟React一样也分为全局安装或者使用npx直接创建项目

// 全局安装，方法1，使用npm
npm install @vue/cli -g

// 全局安装，方法2，使用yarn
yarn global add @vue/cli

// 使用npx直接创建项目
npx @vue/cli create hello-vue

创建项目之后记得选Vue2，vue-cli可以创建2或3，别选错了哈

然后也是进入项目文件夹启动项目

cd hello-vue
npm run serve
// 或
yarn serve

这样就能看到一个大大的V，成功

二、文件夹结构

左边是React，右边是Vue，看似好像差不多。

1.node_modules：依赖包文件夹，放我们平时安装的依赖包

2.public：公共资源文件夹，里边的文件不会被打包，放ico或者index.html，也可以放一些自己不想被打包的文件

3.src：专门放我们的代码，页面啊，css啊，js啊，组件啊巴拉巴拉

4.其他，一般都是配置文件，或者package记录什么的

5.vue.config.js这是vue项目特有的，用于配置webpack，或者跨域配置，这有人就要问了，react没有这个怎么配置呢，咱们后边讲

我们可以看到，src中的样子比外边不一样多了，正常开发过程中，肯定不能把所有的文件都让在src中，等不到下个人骂街，你自己就先把自己骂糊涂了。所以src还可以细分，下面我按照我的习惯来丰富一下文件夹，稍等

好了，现在更接近于实际项目开发中的一个文件结构，大家也可以根据自己的习惯增减文件夹，下面对应的讲一下都是干啥用的。

api —— 统一管理接口

assets —— 图片，音视频等静态资源，也有人喜欢往里放css和js

components —— 全局组件

redux/store —— redux和vuex相关代码，也有喜欢store写成vuex

router —— 路由文件夹

styles —— 全局样式，less，sass文件，样式统一管理

utils —— 常用的函数等js文件，axios封装或加密解密函数在这放着

views —— 放页面的

App.js/app.vue —— 两个等价，总节点

index.js/main.js —— 两个等价，作为总的引入js

三、最简单的结构

一般来说我们不会在App.js或者App.vue中直接写我们的逻辑代码，而是将它作为一个总结点，其他的页面作为组件引入至App中，下面我们分别在两个项目中创建一个Home组件并引入App

1.React结构

首先我们先在views中创建一个Home文件夹，然后创建Home.js作为我们第一个React组件。

在这我推荐一个VSCode中一个很好用的React插件，ES7+React/Redux/React-Native snippets

只需输入rfc+回车就能创建出一个简单的React页面结构

// Home.js
import React from 'react'

export default function Home() {
    const pageName = 'React-Home'

    return (
        <div>{pageName}</div>
    )
}

通过import引入Home组件，直接在下面通过<Home/>使用即可

// App.js
import React from 'react'
import Home from './views/Home/Home'

export default function App() {
  return (
    <div>
      React-App
      <Home/>
    </div>
  )
}

2.Vue结构

同样的，在views中创建一个Home文件夹，然后创建Home.vue，这次不是js文件了，而是vue特有的文件后缀*.vue。

// Home.vue
<template>
	<div>{{pageName}}</div>
</template>

<script>
	export default {
		data() {
			return {
				pageName: 'Vue-Home'
			}
		}
	}
</script>

<style>
</style>

同样的通过import引入Home组件，但是与React不同的是，引入的组件不能直接使用，还需要在components中进行注册才可使用。

// App.vue
<template>
	<div id="app">
		Vue-App
		<home></home>
	</div>
</template>

<script>
	import Home from './views/Home/Home.vue'

	export default {
		name: 'App',
		components:{
			Home
		}
	}
</script>

<style>
</style>

编写好了，大家可能会看到以下报错

解决办法也很简单，只需要在vue.config.js进行配置即可

// vue.config.js
const {
	defineConfig
} = require('@vue/cli-service')

module.exports = defineConfig({
	transpileDependencies: true,
	lintOnSave: false //新增这一句，关闭elsint检测
})