前端开发环境搭建: 【前端开发环境搭建】一:下载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最大的坑就是与安卓的版本问题,全局安装Dva脚手架
1.遇到问题要修改配置准备降级。
2.StyleSheet检查css属性是否符合
3.通过StyleSheet的create()方法
4.事件onPress={this.xxx}
… …
$ npm install -g dva-cli
全局安装TypeScript
$ npm install -g typescript