前端开发环境搭建

前端开发环境搭建：

一：下载nodejs，下载地址：https://nodejs.org/en/

监测nodejs是否安装完毕； node -v监测当前nodejs版本，，npm -v检测当前版本

二： 选装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

npm使用简介：

生成package.json文件的方法：

$ npm init -y

安装包的方法：

$ npm install <包名（例如：gulp， webpack...）> -g --save-dev
// -g表示全局安装
// -save表示保存到package.json文件中"dependencies"属性中，生成环境下仍然依赖的包，使用-save,可以简写为-S
// --save-dev表示保存到package.json文件中"devDependencies"属性中，只在开发环境下使用到的依赖包，使用--sabe-dev,可简写为-D

安装yarn

下载方法：
请访问：https://yarnpkg.com/lang/zh-hans/docs/install/#windows-stable

全局安装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

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

require("**") //导入jquery模块
module.exports = {} //导出模块

全局安装Vue脚手架

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

全局安装React脚手架

$ npm install -g create-react-app

全局安装React-Native脚手架(请在安装前按照官网进行环境配置)

$ 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脚手架

$ npm install -g dva-cli

全局安装TypeScript

$ npm install -g typescript