适配移动端操作如下: 安装 postcss-pxtorem .amfe-flexible npm i postcss-pxtorem npm i amfe-flexible amfe-flexible(可以安装,可以自己写),如下是我通过 amfe-flexible 修改的flexible 文件: (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.device

1. 由于react默认隐藏webpack配置需要手动显示. npm run eject //Are you sure you want to eject? This action is permanent. (y/N) y

这个问题是create react app 里面的package.json里面已经配置了   "babel": {     "presets": [       "react-app"     ]   } 这样的配置,但是又在根目录下建立了一个babelrc的文件,所以导致重复,但是不可以直接删掉,不然报   编译失败 ./src/index.jsSyntaxError: D:\Work\ReactPro\src\index.js: Unexpe

1.安装postcss-import,postcss-cssnext 包 2.修改package.json 将postcss响应的内容替换为 "postcss": { "plugins": { "postcss-import": {}, "postcss-cssnext": {} } },

$ npm install -g webpack $ npm install -g webpack-dev-server如果遇到类似 EACESS 错误,则需要用超级用户的模式运行 $ sudo npm install -g webpack $ sudo npm install -g webpack-dev-server创建文件夹 $ mkdir react-playground && cd $_ $ npm init -y  

//复习 1 .块级作用域 let 和const 2 变量结构 默认值 一般往后写 rest参数(了解) 箭头函数(重要)(x,y)=>{} 3.map 存储高级键值对 4.set集合(去重) //集合内不存在重复 //es5 es6 console.log('----------------start----------------'); //1.块级作用域 //{ // let a; //} // let 和 const 命令 // var声明变量放弃使用 //let 声明变量(node.j

一:先自行下载安装node和npm 二:cnpm install create-react-app -g 三:create-react-app my-project 四:cd my-project  //这是项目的目录 五:cnpm start  //启动项目

//安装less less less-loader npm install less less-loader --save-dev 安装完成后,在项目中的config目录下找到webpack.config.js文件(说明:新建项目一般默认不显示config目录的,需要执行npm run eject) //在文件中,找到以下代码 const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex =

配置ES6 1.安装插件: babel-loader,babel-preset-es2015,babel-preset-react. 2.添加配置文件中部分内容: { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015','react'] } }, 配置react 1.安装插件: react,react-dom,jsx-loader. 2.添加配置文件中部分内容: { test: /\.(js|jsx)$/, loa

一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体验> 项目实战:<webpack+react小项目> 三.webpack相关参数 1. entry参数 module.exports = { ... entry:__dirname + '/client/index',//打包入口文件 ... } /******* 例如可以是react渲染到

React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的能够代理多个接口的请求方式 proxy('/back', { target: 'http://172.20.1.148:8082', changeOrigin: true }) 1):安装http-proxy-middleware管理包,npm i http-proxy-middleware --s

前言 下面是我们使用到技术栈: webpack + react + redux + react-router + react-thunk + ES6 + .... 注意事项: 建议使用npm5.X 或者 yarn 包管理工具(最好不要使用cnpm,虽然安装包速度上很快,但是在文件关联上会有坑,之前用的时候被坑过) 一.新建项目目录 config : webpack 配置文件 dist: 打包后代码 src: 源码目录 二.基础配置 安装基础的包 // 生成默认package.josn 文件 np

本章节,我们对如何在脚手架中引入CSS,如何压缩CSS,如何使用CSS Modules,如何使用less,如何使用postcss等问题进行展开学习. 1 支持css (1)在app目录,新建一个css,命名为index.css,输入样式: h1{ display: flex; height: 200px; align-items: center; justify-content: center; color: #8FBC8F; } (2)在index.js中引入css import './ind

vue-cli2.x创建完项目 安装postcss-sprites yarn add postcss-sprites -D 根目录配置postcss.config.js配置中,需要注意,1:当有用pxtorem 或者 pxtoviewport等像素转换的时候,需要把postcss-sprites的参数放在前面,这样生成后的雪碧图定位才会被后面的plugins转换.2:spritePath不需要制定到编译后的dist目录中,因为dist里最终会通过webpack的file-loader生成一个带h

如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCSS插件配合预处理器得到很好的赞誉,因为他们将功能添加到你的工作流中,让你工作变得更加轻松.如果你只使用一个预处理器,而不使用这些插件,你的工作流至少会变得更加困难. 我们会涉及一些免费的PostCSS插件,然后我们将会介绍一些配置的阐述,告诉您如何将PostCSS和你喜欢的预处理器(Sass.Sty

---恢复内容开始--- 要想用react,需要安装: 1)babel-sublime: 作用:编译es6,支持ES6, React.js, jsx代码高亮,并对所编译的代码进行高亮显示. 安装步骤:在github(https://github.com/babel/babel-sublime)中找到babel-sublime下载压缩文件.解压,把babel-sublime-master文件夹,放在Packages中. 2)配置sublime-react 作用:类似于emmet的自动扩展代码插件,

一.git bash here mdkr cnpm init -y ls -a ls -l ls -la隐藏的也可查看 cat package.json 二.npm npm i webpack-dev-server -g 全局:任何目录运行 本地:本地需要调用附带的插件 npm list npm list -g npm uninstall supervisor -g 全局删除 npm remove supervisor -g全局删除,彻底卸载,再安装 npm i supervisor --sav

代码:github 一.webpack4--基本配置 这一部分通过webpack的基本配置,使用loader对图片和样式进行打包,从而了解webpack4简单的用方法,保证自己能够配置正确,提升学习动力. 1.初始化配置 mkdir webpack4 cd webpack4 mkdir demo1 cd demo1 npm init -y 或 npm init 目录结构 webpack4 ├── webpack4/demo1 │   └── webpack4/demo1/package.json

图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. 为了让项目中的vue文件支持这种写法,需要在配置postcss-cssnext模块. 往项目中安装postcss-cssnext模块: npm install postcss-cssnext --save-dev 安装完后,会在项目的package.json文件的devDependencies对象中看到p

使用webpack2.0配置postcssloader 安装postcss-loader npm install --save-dev postcss-loader 然后配置webpack.config.js { test:/\.css$/, use:[ 'style-loader','css-loader?importLoaders=1','postcss-loader' ] } 一种办法是配置postcss.config.js module.exports = { plugins: [ re