# 检查安装命令

## 进入命令行
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();


# 顺序图的绘制