VSCode中的ReactUmiJS脚手架搭建

1、下载NodeJs（尽量使用压缩包而不是安装包），解压到指定目录中（例如D:\gsofts\Nodejs\node-v12.18.1-win-x64），并给这个目录设置为NODE_HOME的环境变量，并加入到Path中去，之后在Terminal 中输入node -v和npm -v来检查是否生效

2、设置全局目录和全局缓存目录，例如全局目录为D:\gsofts\Nodejs\nodeGlobal，缓存目录为D:\gsofts\Nodejs\nodeCache

npm config set prefix "D:\gsofts\Nodejs\nodeGlobal"

npm config set cache "D:\gsofts\Nodejs\nodeCache"

并在环境变量中增加NODE_GLOBAL指向全局目录，并加入到Path中去

3、在全局目录下创建node_modules目录，例如D:\gsofts\Nodejs\nodeGlobal\node_modules，在环境变量中增加NODE_PATH指向此目录

4、依次输入以下命令：

npm config set registry "https://registry.npm.taobao.org" --global

npm config set chromedriver_cdnurl "http://cdn.npm.taobao.org/dist/chromedriver" --global

5、安装yarn：

npm install yarn -g

成功后输入yarn -v 来检查是否安装完成

6、设置yarn的全局目录和全局缓存目录，例如全局目录为D:\gsofts\Nodejs\yarnGlobal，缓存目录为D:\gsofts\Nodejs\yarnCache

yarn config set global-folder "D:\gsofts\Nodejs\yarnGlobal"

yarn config set cache-folder "D:\gsofts\Nodejs\yarnCache"

7、依次输入以下命令：

yarn config set registry "https://registry.npm.taobao.org" -g

8、安装UmiJS官网的例子，在任意位置创建项目目录，例如appdemo（D:\workarea\demo\appdemo）

进入目录后执行yarn create @umijs/umi-app

9、在此目录下安装依赖

运行yarn

10、启动yarn

运行yarn start

11、按照官网例子增加layout样式：

在.umirc.ts中增加layout: {}，如下：

import { defineConfig } from 'umi';

export default defineConfig({

 nodeModulesTransform: {

   type: 'none',

 },

 layout: {},

 routes: [

   { path: '/', component: '@/pages/index' },

 ],

});

12、在VSCode中打开appdemo，使用Terminal命令操作yarn

13、如果运行yarn -v时报错，提示权限不够，则以管理员身份运行PowerShell，运行set-ExecutionPolicy RemoteSigned，之后就可以在VSCode中运行yarn了