Mac nodejs npm react Qnui

*** 其实Mac跟 Windows的配置 步骤是一样的,不同的就是Mac的环境变量的添加 ***

  1. 第一步下载并安装nodejs

  2. 在方便找到的文件夹下建立“node_global”及“node_cache”两个文件夹(我是在自己的用户目录下创建的)。然后在终端中键入两行命令:

npm config set prefix "~\nodejs\node_global"
npm config set cache "~\nodejs\node_cache"

  1. 安装模块

npm install express –g

  1. 设置环境变量

新建环境变量 ** NODE_PATH **

  1. 首先确定自己使用的shell,** echo $SHELL ** 即可
  2. 如果是bash,则将变量添加到* ~/.bash_profile ~/.bashrc (此处网友提供,未经验证,因为我的是zsh);如果是zsh,添加变量到 ~/.zshrc *中
  3. ** vim ~/.zshrc ** 打开文件 ,在文件最后加上
    ** export NODE_PATH=~/nodejs/node_global/lib/node_modules **
    (此处不要直接复制,而是要找到npm安装的软件的位置,我通过npm全局安装的软件全都安装在* ~/node_global/lib/node_modules *目录下)
  4. ** source ~/.zshrc ** 使变量立即生效
  1. 以上步骤都OK的话,我们可以再次开启cmd命令行,进入* node *,输入 ** require('express') ** 来测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。

( 以下步骤可参考[qnui官方文档](http://qnui.taobao.org/start/getStart/?
type=%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8) )

  1. 构建react开发环境
    以yeoman为例:

npm install -g yo
npm install -g generator-react-webpack
mkdir QNUI-project && cd QNUI-project
yo react-webpack

注:此处可能报错 ** yo 不是内部或外部命令。。。
原因:环境变量没有配置,系统找不到 yo 路径
解决办法:配置系统变量
Path **,(可参考步骤 4 ,路径为 yo 安装完成之后,可执行文件的位置)

  1. ** vim ~/.zshrc ** 打开文件
  2. 在文件最后加上
    ** export PATH=$PATH:~/nodejs/node_global/bin ** (此处也不要直接复制,而是要找到yo的安装位置或者yo的快捷方式的位置,我的在 * ~/nodejs /node_global/bin *目录下)
  3. ** source ~/.zshrc ** 使变量立即生效

** 对比 Mac 和 Windows 下 yo 默认快捷方式的位置 **
Mac 下的 yo

Paste_Image.png

Windows 下的 yo
Paste_Image.png

  1. 引入QNUI
    QNUI提供了npm包的引入方式,在项目目录(** QNUI-project **)下运行

npm install qnui --save
*如果安装时出现 *
UNMET PEER DEPENDENCY react-addons-css-transition-group@^0.14.0
或者类似的
UNMET PEER DEPENDENCY *****
错误时,只需要重新安装对应的依赖即可

例如:npm install --save react-addons-css-transition-group react-dom
参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容