前端开发环境搭建:
一:下载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
123
npm使用简介:
生成package.json文件的方法:
$ npm init -y
1
安装包的方法:
$ npm install <包名(例如:gulp, webpack...)> -g --save-dev
// -g表示全局安装
// -save表示保存到package.json文件中"dependencies"属性中,生成环境下仍然依赖的包,使用-save,可以简写为-S
// --save-dev表示保存到package.json文件中"devDependencies"属性中,只在开发环境下使用到的依赖包,使用--sabe-dev,可简写为-D
1234
安装yarn
下载方法:
请访问:https://yarnpkg.com/lang/zh-hans/docs/install/#windows-stable
全局安装webpack (基于nodejs的自动化【模块】打包工具)
$ npm install webpack -g
1
webpack的使用方法:
$ npm install webpack@3 -g //@后面是你要安装的版本号
$ webpack -v //检测是否安装了webpack
12
然后配置一个webpack.config.js文件,编译里面的内容:
var path = require("path")
module.exports = {
"entry": "./lib/index.js", //入口文件设置
"output": { //出口设置
"path": __dirname + "/build",
"filename": "xxhash.js",
"library": "XXH",
"libraryTarget": "umd",
}
}
1234567891011
// 安装插件:
$ cnpm install style-loader css-loader //打包css的插件
$ cnpm install url-loader //打包image的插件
$ cnpm install file-loader //打包image的插件
123
执行webpack命令,执行webpack.config.js/里面的内容
全局安装gulp
$ npm install gulp -g
$ npm install -g nodemon //自动检测文件更改,重启服务器
12
require("**") //导入jquery模块
module.exports = {} //导出模块
全局安装Vue脚手架
$ npm install vue
$ npm install -g @vue/cli
12
全局安装React脚手架
$ npm install -g create-react-app
1
全局安装React-Native脚手架(请在安装前按照官网进行环境配置)
$ npm install -g react-native-cli
1
$ react-native init <project-app> //生成native项目
1
react-native最大的坑就是与安卓的版本问题,
1.遇到问题要修改配置准备降级。
2.StyleSheet检查css属性是否符合
3.通过StyleSheet的create()方法
4.事件onPress={this.xxx}
… …
全局安装Dva脚手架
$ npm install -g dva-cli
1
全局安装TypeScript
$ npm install -g typescript