飞冰是什么？

参考官方解释

ice-devtools是什么？

ice-devtools是飞冰官方提供的开发物料的脚手架工具，更加详细的介绍参考官网

ice-devtools工具的安装使用

全局安装ice-devtools工具

  1. $ npm install ice-devtools -g
  2. ### 检查是否安装成功
  3. $ idev -V
  4. => 2.3.0

初始化项目

  1. ### 新进一个vue物料目录
  2. $ makdir vue-materials
  3. ### 初始化vue物料目录
  4. $ cd vue-materials
  5. $ idev init
  6. ### 根据提示初始化
  7. ? npm scope (optional)
  8. ? materials name (vue-materials)
  9. ? description (This is a material project)
  10. ? please select the initial material template?
  11.   @icedesign/ice-react-material-template (React 标准模板)
  12. ❯ @icedesign/ice-vue-material-template (Vue 标准模板)
  13.   @icedesign/ice-angular-material-template (Angular 标准模板)

初始化目录

  1. ├── .template //自定义模板
  2. ├── README.md
  3. ├── blocks //区块
  4. │   └── ExampleBlock
  5. │       ├── README.md
  6. │       ├── _gitignore
  7. │       ├── demo
  8. │       │   ├── index.html
  9. │       │   └── index.js
  10. │       ├── package.json
  11. │       ├── src
  12. │       │   └── index.vue
  13. │       └── vue.config.js
  14. ├── package.json
  15. └── scaffolds  //模板
  16.     └── ExampleScaffold
  17.         ├── README.md
  18.         ├── _gitignore
  19.         ├── babel.config.js
  20.         ├── package.json
  21.         ├── public
  22.         │   ├── favicon.ico
  23.         │   └── index.html
  24.         ├── src
  25.         │   ├── App.vue
  26.         │   ├── assets
  27.         │   │   └── logo.png
  28.         │   ├── components
  29.         │   │   └── HelloWorld.vue
  30.         │   ├── layouts
  31.         │   │   └── BlankLayout
  32.         │   │       └── index.vue
  33.         │   ├── main.js
  34.         │   ├── pages
  35.         │   │   ├── About
  36.         │   │   │   └── index.vue
  37.         │   │   └── Home
  38.         │   │       └── index.vue
  39.         │   └── router.js
  40.         └── vue.config.js

开发物料

  1. ### 新建一个区块
  2. $ idev add
  3. ### 可以选择创建区块、组件、模板,比如我们选择区块，会自动创建一个区块
  4. $ cd blocks/ExampleBlock
  5. $ npm install //安装区块相关依赖，可以将区块当做一个独立的组件开发
  6. $ npm start //开启热更新，实时调试
  7. ### 发布npm包
  8. $ npm version 0.0.1 //指定发布版本为0.0.1
  9. $ npm publish //发布到npm上去
  11. ps:每个组件，区块，模板都需要单独推送到npm上面去，这样才能找到相关的模块，每一个模块都是单独的npm包

生成物料数据

  1. ### 生成的物料数据在项目根目录下的build目录，比如我这里就在(vue-materials/build)
  2. $ npm run generate
  3. $ ls build/
  4. materials.json

部署物料数据

将materials.json放到任意可以访问的静态服务下面，然后将静态服务的URL复制到飞冰的自定义物料里面，刷新一下就可以了。