react 项目教程(安装和进行配置）
2018-11-29 本文已影响19人
不7而遇_
先在gitee / coding / github 上创建项目 在本地用ssh 克隆下来，
在命令行输入 create-react-app 项目名 创建项目 进入项目目录。由于新版本的react script 有兼容问题。我们需要先降级
npm uninstall react-scripts -S
然后安装低版本的 npm install react-scripts@1.x -S
然后删除原有的 node-models 和 package.lock.json 文件 重新安装依赖 npm i
安装并配置 less
npm i less-loader less -S 在 webpack.config.dev.js 中修改 （159 行）
将有的css 配置 删除 复制以下代码
{ test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
//less
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader'),
options: {
javascriptEnabled: true
},
},
],
},
然后配置 antd-mobile 首先结束运行
npm install antd-mobile --save 安装antd-mobile 还要进行按需加载的配置 需要安装
npm i babel-plugin-import -D
然后在package.json中 配置 babel
{
"plugins": [
["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件
]
}
下一步路由配置 查看链接
https://www.jianshu.com/p/23ffb5154818
