前端开发环境搭建_如何搭建安卓开发环境

前端开发环境搭建：

一：下载nodejs

node -v 

检测当前nodejs版本。

npm -v 

检测npm当前版本。

二： 选装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org //使用npm安装包的地方都可以使用cnpm替代（但是有些资源cnpm是下载不到的） npm config set registry https://registry.npm.taobao.org //将npm设置使用cnpm 

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

拓展：npm使用简介：

1.生成package.json文件的方法：

$ npm init -y 

2.安装包的方法：

$ npm install <包名（例如：gulp， webpack...）> -g --save-dev 

PS:
-g表示全局安装
-save表示保存到package.json文件中"dependencies"属性中，生成环境下仍然依赖的包，使用-save,可以简写为-S
–save-dev表示保存到package.json文件中"devDependencies"属性中，只在开发环境下使用到的依赖包，使用–sabe-dev,可简写为-D

三、选装yarn（有些包用npm下载不到的就可以用yarn试试）

可以直接使用命令安装:

npm install --global yarn 

Mac电脑的同学还是遇到没权限的情况在前面加sudo，后续不在赘述。

四、选装webpack (基于nodejs的自动化【模块】打包工具)

$ npm install webpack -g 

拓展：webpack的使用方法

$ npm install webpack@3 -g //@后面是你要安装的版本号 $ webpack -v //检测是否安装了webpack 

然后配置一个webpack.config.js文件，编译里面的内容：

var path = require("path") module.exports = { 
    "entry": "./lib/index.js", //入口文件设置 "output": { 
    //出口设置 "path": __dirname + "/build", "filename": "xxhash.js", "library": "XXH", "libraryTarget": "umd", } } 

// 安装插件：

$ cnpm install style-loader css-loader //打包css的插件 $ cnpm install url-loader //打包image的插件 $ cnpm install file-loader //打包image的插件 

执行webpack命令，执行webpack.config.js/里面的内容

五、选装gulp（同webpack作用差不多，目前基本上没见有项目用了）

$ npm install gulp -g $ npm install -g nodemon //自动检测文件更改，重启服务器 

六、全局安装Vue脚手架（Vue开发同学需要的）

$ npm install vue $ npm install -g @vue/cli 

七、全局安装React脚手架（React开发同学需要的）

$ npm install -g create-react-app 

1.全局安装Gatsby（React开发静态网站推荐的脚手架）

npm install -g gatsby-cli 

八、全局安装React-Native脚手架(混合开发同学需要的)

请在安装前按照官网进行环境配置:https://reactnative.cn/

$ npm install -g react-native-cli 

$ react-native init <project-app> //生成native项目 

react-native最大的坑就是与安卓的版本问题，
1.遇到问题要修改配置准备降级。
2.StyleSheet检查css属性是否符合
3.通过StyleSheet的create()方法
4.事件onPress={this.xxx}
… …

九、全局安装Dva脚手架（React的一个衍生的脚手架）

$ npm install -g dva-cli 

十、全局安装TypeScript（类型校验用的，使项目更加健壮）

$ npm install -g typescript 

十一、全局安装http-server（本地跑build之后的文件用的）

npm i http-server -g 

十二、全局安装express-generator（前端自己搞后端服务可以用nodejs相关框架、学习成本会低一些）

官网：https://www.expressjs.com.cn/

npm install -g express-generator 

十三、全局安装ant-design/pro-cli（antd-pro脚手架）

官网：https://pro.ant.design/zh-CN/

npm i @ant-design/pro-cli -g 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/2962.html