先从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 终止(如需要进行其他操作)。
环境配置到此讲完,如有不对,欢迎指正,共同进步。