快速上手
本文将带领你从零开始在本地搭建一个 alita 项目。
一、环境准备
安装node
首先得有 node,并确保 node 版本是 14 或以上。
windows 下推荐用 nvm-windows来管理 node 版本,
mac 或 linux 下推荐用 nvm来管理 node 版本 。
安装 nvm:
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
$ nvm -v
0.39.1
安装 node;
$ nvm install 16
$ nvm use 16
$ node -v
v16.10.0
安装包管理工具
node 默认包含 npm 包管理工具,但 alita 官方推荐pnpm 包管理工具。
安装 pnpm。
curl -fsSL https://get.pnpm.io/install.sh | sh -
$ pnpm -v
7.3.0
二、使用脚手架创建项目
创建项目
alita 官方提供了 create-alita
脚手架 ,可以轻松快速创建一个 alita 项目。
首先创建一个名为 myapp
的文件夹。
$ mkdir myapp && cd myapp
然后执行以下命令,该命令会安装 create-alita
脚手架并自动运行,
$ pnpx create-alita
运行成功后,如果你没安装 create-alita
,会提示是否要安装最新的 create-alita
依赖包。
√ Install the following package: create-alita@latest? (Y/n) · true
安装成功后,选择包管理工具,这里推荐 pnpm,
? Pick Npm Client » - Use arrow-keys. Return to submit.
npm
cnpm
tnpm
yarn
> pnpm
再选择 npm 源,国内建议选 taobao 源,这样后续安装依赖速度比较快,
? Pick Bpm Registry » - Use arrow-keys. Return to submit.
npm
> taobao
选择后会自动生成一个最基本的 alita 项目,并自动安装依赖,
√ Pick Npm Client » pnpm
√ Pick Bpm Registry » taobao
Write: .editorconfig
Write: .eslintignore
Copy: .eslintrc.js
Write: .gitignore
Write: .npmrc
Write: .prettierignore
Write: .prettierrc.js
Write: .stylelintrc.js
Write: config\config.ts
Copy: jest-setup.ts
Copy: jest.config.ts
Copy: logo.png
Copy: mock/app.ts
Copy: mock/user.ts
Write: package.json
Copy: plugin.ts
Copy: README.md
Copy: src/app.tsx
Copy: src/assets/demoIcon/home.png
Copy: src/assets/demoIcon/home1.png
Copy: src/assets/demoIcon/list.png
Copy: src/assets/demoIcon/list1.png
Copy: src/assets/demoIcon/setting.png
Copy: src/assets/demoIcon/setting1.png
Copy: src/assets/yay.jpg
Copy: src/components/SearchBar/__tests__/__snapshots__/index.test.tsx.snap
Copy: src/components/SearchBar/__tests__/index.test.tsx
Copy: src/components/SearchBar/index.less
Copy: src/components/SearchBar/index.tsx
Copy: src/favicon.png
Copy: src/global.css
Copy: src/models/index.ts
Copy: src/models/todo.ts
Copy: src/pages/index/index.css
Copy: src/pages/index/index.tsx
Progress: resolved 9, reused 9, downloaded 0, added 0
此刻我们成功得搭建起一个最简单的H5项目。
项目目录结构
├── config
│ └── config.ts // 配置文件,包含 alita 内置功能和插件的配置。
├── mock
│ └── app.ts
│ └── user.ts
├── node_modules
│ └── .cache
│ ├── bundler-webpack
│ ├── mfsu
│ └── mfsu-deps
├── src
│ └── .umi // dev 时的临时文件目录
│ └── assets // 静态资源
│ └── yay.jpg
│ └── components // 组件
└── SearchBar
└── index.less
└── index.ts
│ └── models // 全局组件
└──index.ts
└── todo.ts
│ └── pages // 路由组件
└── index
└── index.less
└── index.tsx
└── list
└── index.less
└── index.tsx
│ └── services // 服务
└── api.ts
│ └── app.tsx // 运行时配置文件
│ └── favicon.png
│ └── global.css
├── .editorconfig // 编辑器编码风格配置
├── .eslintignore // eslint校验忽略文件
├── .eslintrc.js // eslint校验配置
├── .gitignore // git忽略文件
├── .npmrc // npm源地址配置
├── .prettierignore // prettier代码格式化忽略文件
├── .prettierrc.js // prettier代码格式化配置
├── .stylelintrc.js // stylelint Css代码规范配置
├── logo.png
├── package.json
├── pnpm-lock.yaml
├── README.md
├── tsconfig.json
├── typings.d.ts
启动项目
执行 pnpm dev
命令,
$ pnpm dev
> alita dev
info - Hello Alita@3
info - Using AConsole Plugin
info - Using KeepAlive Plugin
info - Using Request Plugin
info - Using Dva Plugin
info - Using ClassNames Plugin
info - Using Mobile Layout Plugin
info - Using Dva Plugin
info - Using HD Plugin
info - Using Antd Mobile Plugin
info - Using Mobile Layout Plugin
info - Umi v4.0.8
ready - App listening at http://localhost:8000
event - [Webpack] Compiled in 6642 ms (558 modules)
info - [MFSU] buildDeps since cacheDependency has changed
event - Network: http://192.168.0.140:8000
wait - [Webpack] Compiling...
event - [Webpack] Compiled in 558 ms (523 modules)
wait - [Webpack] Compiling...
event - [Webpack] Compiled in 233 ms (523 modules)
event - [MFSU] Compiled in 14063 ms (2517 modules)
info - [MFSU] write cache
info - [MFSU] buildDepsAgain
info - [MFSU] skip buildDeps
在浏览器里打开 http://localhost:8000/,能看到以下界面。
部署发布
执行 pnpm build
命令,
> alita build
info - Hello Alita@3
info - Using AConsole Plugin
info - Using KeepAlive Plugin
info - Using Request Plugin
info - Using Dva Plugin
info - Using ClassNames Plugin
info - Using Mobile Layout Plugin
info - Using Dva Plugin
info - Using HD Plugin
info - Using Antd Mobile Plugin
info - Using Mobile Layout Plugin
info - Umi v4.0.8
event - [Webpack] Compiled in 21283 ms (2173 modules)
info - Memory Usage: 455.47 MB (RSS: 558.06 MB)
event - Build index.html
产物默认会生成到 ./dist
目录下,
./dist
├── static
└──yay.c56526f4.jpg
├── index.html
├── favicon.png
├── umi.css
├── umi.js
完成构建后,就可以把 dist 目录部署到服务器上了。
三、创建 PC 项目
用 create-alita
脚手架创建的 alita 项目是个 H5 项目,
若想改成 PC 项目,只需将 config.ts
文件的内容替换成以下代码即可。
在 PC 项目中推荐使用 antd 组件库,故配置 antd:{}
。
import { defineConfig } from 'alita';
export default defineConfig({
appType: 'pc',
antd: {},
})
再执行以下命令安装 antd 组件库。
$ pnpm add antd
四、自己搭建 alita 工程
如果你不想使用脚手架搭建一个 alita 项目,想自己搭建一个 alita 项目,可以尝试以下做法。
使用npm init 初始化项目
首先创建一个名为 myAlita
的文件夹。
$ mkdir myAlita && cd myAlita
执行以下命令,在 myAlita 文件夹中生成一个 package.json 文件。
pnpm init
安装 alita
执行以下命令,安装 alita,
$ pnpm add alita
安装完成后,package.json 文件中,多了一段代码。
{
"name": "myalita",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
+ "dependencies": {
+ "alita": "^3.0.12"
+ }
}
添加配置文件
$ mkdir config && cd config && touch config.ts
在window下,可以使用 Git Bash 执行以上命令
在 config.ts 中添加以下代码,告诉 alita 这是一个 pc 端项目,并引入 antd 组件库。
+ import { defineConfig } from 'alita';
+
+ export default defineConfig({
+ appType: 'pc',
+ antd: {},
+ })
当然得执行以下命令,回到根目录,安装一下 antd 。
$ cd ../
$ pnpm add antd
添加路由文件
$ cd ../ && mkdir src && cd src
$ mkdir pages && cd pages
$ mkdir home && cd home && touch index.tsx
执行以下命令,创建 src 文件夹,在 src 文件夹中创建 pages 文件夹,
在 pages 文件夹中创建 home 文件夹,在 home 文件夹中创建 index.tsx 文件,
最后在 index.tsx 中添加以下代码。
import React from "react";
import { Button} from 'antd';
const Home = () => {
return (
<Button type="primary">欢迎使用 alita3 </Button>
)
}
export default Home;
定义启动项目脚本命令
在 package.json 文件中添加以下代码
{
"name": "myalita",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "dev": "alita dev"
},
"author": "",
"license": "ISC",
"dependencies": {
"alita": "^3.0.12",
"antd": "^4.22.3"
}
}
启动项目
$ cd ../../../
$ pnpm dev
回到根目录,执行 pnpm dev
启动项目。