前端开发环境搭建

前端开发环境搭建: 【前端开发环境搭建】一:下载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//生成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

    推荐阅读