react与vue的对比篇(1)

先从vue和react的环境配置安装开始讲,在配置环境前请确保已经安装node

1.设置淘宝镜像:

npm install -g cnpm--registry=https://registry.npm.taobao.org

注解: npm安装会很慢,有时由于网络原因模块安装还会错误,后面需要安装的东西很多,所有先装cnpm。以后所有的npm install使用cnpminstall代替,-g是全局,在其他盘也可以使用这个命令的

2.全局安装webpack和服务器:

cnpm install webpackwebpack-dev-server–g

注解:全局安装webpack和webpack-dev-server,多个安装用空格隔开就行,以上两个是不分vue和react的。

3.全局安装对应脚手架:

cnpm install -g create-react-app

注解:react脚手架全局安装运行create-react-app  --version可以查看版本,create-react-app -v有使用说明

cnpm install -g vue-cli

注解:vue脚手架全局安装,此时vue变成命令,命令行运行vue会有说明,运行vue-cli -v或者vue -v都是无效的,因为vue是命令

4.创建项目和安装:

(1):create-react-app  项目名称

(2):cd  项目名称

注解:例如create-react-app  first-react,react会自动执行npm install,执行完成后,再cd  项目名称

(1):vue init webpack  项目名称

(2):cd    项目名称

(3):cnpm install

注解:例如vue init webpack first-react,第(2)步之后,一定不要忘记cnpm install。

注意:执行第一步完成后,会有一些问题,第一个是问文件夹名字,第二个是项目描述,第三个是作者,这些可以键盘输入之后按enter,也可以一直按enter,会有默认值。之后都是选项,react一路按enter没有问题的。vue之后选项(Y/n),建议选n。它的选项包括是否检查代码格式,是否进行单元测试等,具体问题可以百度。如果不想有这些选项(Y/n),只需将vue init webpack first-react改为vue init webpack-simple  first-react,webpack-simple默认不会有检查代码和单元测试等选项,webpack-simple无需像前面一样另外做全局安装,前面已经全局安装webpack了。

5.运行,必须在当前项目文件夹下运行,确保已经执行 cd    项目名称:

npm start

注解:react是npm start,命令会自动打开浏览器

npm  run dev

注解:vue也是npm  run dev,vue2.0命令会自动打开浏览器,vue版本1需要自行在浏览器输入http://localhost:8080

6.终止,在自带命令工具,可以直接关闭(如果不需要进行其他操作),也可以ctrl + c 终止(如需要进行其他操作)。

环境配置到此讲完,如有不对,欢迎指正,共同进步。

你可能感兴趣的:(react与vue的对比篇(1))