检查安装命令

进入命令行

Win+R 输入 powershell

node检查

npm -v node -v

git检查

git -v

code检查

Win + 搜索 Code关键字

Ionic开发环境安装

设置国内源

npm config set registry https://registry.npmmirror.com/

安装Ionic脚手架

直接打开powershell输入： npm install -g @ionic/cli

检查安装成功

ionic info

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 选择A【全是】

创建第一个ionic app程序

cd C:/ # 打开C盘盘符根目录 mkdir workspace # 创建workspace文件夹 cd workspace # 进入workspace文件夹 pwd # 查看当前命令行所在路径

传统前端开发

你是一名有UI设计基础的资深前端工程师，请您使用ionic v7及以上的版本，根据上面产品结构和信息结构图，完成“创作”页面的整体布局，及其每个区域的内容前端编写，并补充充足的示例数据，并运用ionic组件库优化页面呈现效果与交互。

首页产品结构分析

我在用ionic7.2.0的angular类型创建的tabs模板开发项目，你是一名资深的前端工程师，我在tab1.page组件中写助农产品销售商城首页部分，请你帮我用ionic逐渐库实现首页页面（包括html所有内容、scss所有具体样式实现、ts模拟数据三个部分文件具体实现代码），需要图标帮我根据语义匹配适合的的icon,具体页面结构如下：
顶部
- 左侧
  - 图片：用户头像
  - 文字:登录
- 中间
  - 新活动切片：一小时玩转平台宝典
- 右侧
  - 宝箱按钮+买货文字+向右箭头

VsCODE操作

项目创建

当在github克隆项目，在vscode打开，须在app终端执行：npm i
- 项目克隆步骤:打开放克隆文件的文件夹，右键空白选择open git bash here,输入git clon git地址
- 合并项目：当把多的丢进少的，将多的除带点的文件复制，丢进少的文件里
  
  swiper的具体使用
安装依赖：参考：https://swiperjs.com/element

注意在项目根目录下，和package.json同级运行：npm install swiper -S ls可查看回到上级目录：cd ../..
全局注册swiper(建议手动创建)
- 在app.component.ts顶部增加： //注册swiper elements import {register} from 'swiper/element/bundle'; register();

顺序图的绘制