a.原因
React在前台项目开发中使用了几个月,但是只是会用antd官网的那些组件了,这两天有余闲,所以系统的学习了一下它的来源,组件化,生命周期,如何搭建一个前台项目,如何打包,如何部署。。
b.安装
安装有时间再补。需要安装npm,之后用npm 安装yarn 脚手架命令 webpack等。
c.项目搭建(脚手架)
今天研究了好久,总是冒出莫名其妙的错误。我前端开发,小白刚接触。。
经过我一系列的尝试,觉得还是yarn和npm我混着用,因为他们有的版本不同,所有有很多奇葩的问题。。
废话不多说,本人window系统。
步骤
1、进入你的react_workspace,打开命令行,执行
create-react-app xxx
create-react-app:是创建脚手架(一个基本的项目);xxx:是你的项目名。
2、以下所有命令均在你新建的项目xxx(也就是xxx文件夹)之下运行
3、把刚刚创建的项目的库里配置文件提出来,作为可修改的配置部分
npm run eject
如果报错:
This git repository has untracked files or uncommitted changes:...
经网上资料参考得知git惹的祸
主要问题是脚手架添加.gitgnore文件,但是却没有本地仓库,依次执行一下就可以了
#git init
#git add .
#git commit -m “saving before ejecting”
4、执行npm start测试是否配置运行没问题
如果这个报错了,我的也报了哈:
./src/index.js
Error: [BABEL] D:\react_test\aaa\src\index.js: Cannot find module '@babel/plugin-transform-react-jsx-self' (While processing: "D:\\react_test\\aaa\\node_modules\\babel-preset-react-app\\index.js$1")
at Array.reduce (<anonymous>)
就把node_modules这个文件夹和它里面的东西都删了,然后运行yarn install
再用npm start 就可以启动了
5、执行yarn start测试yarn是否没问题
6、用yarn安装antd-mobile
yarn add antd-mobile --save
7、用yarn安装按需加载插件
yarn add babel-plugin-import --save-dev
8、执行yarn start测试yarn安装是否没问题
9、设置按需加载ant默认样式(css样式)
打开下面的文件,搜索babel-loader
xxx/config/webpack.config.js
注:现在这个文件有两个babel-loader,修改上面的,也就是babelrc没有设置false的,我觉得应该是默认是true吧,所以就只改了上面的。
在这个对象的options->plugins里面,加上这句
["import", { libraryName: "antd-mobile", style: "css" }], // `style: true` 会加载 less 文件
以上,我觉得是比较简单的创建方式,和官方建议的有点出入,但是这么安装就不报错了哈哈哈,还不错。
d.用法
官网很多组件可以使用,自己也可以写一个组件,然后多人开发可以公共出来共用。
地址:https://mobile.ant.design/docs/react/introduce-cn
e.改进
小白刚入坑,正在努力中。。。有问题可以和我讨论。。