2dfire-cli 中文文档教程

发布于 6年前 浏览 74 更新于 3年前

vue 多页面脚手架 2dfire-cli

安装

$ npm install 2dfire-cli -g
# OR
$ yarn global add 2dfire-cli

所提供的命令

create:

创建一个由 fire 管理的项目

创建好的项目根目录下默认会创建一个 fire.config.js , 里面可以为项目配置一些参数,具体参数后面会标明

  • 启动项目: 在根目录下执行 npm start 或 yarn start

  • 打包项目: 在根目录下执行 fire build env(环境变量)

$ fire create my-project

page:

为项目创建一个模板页面,默认提供几种简单的模板供选择

所有的模板都在 gitLab 上: http://git.2dfire-inc.com/danfan/vue-page-boilerplate.git 后续可以增加一些常用模板

你也可以在你的项目根目录下创建 'template' 文件夹,然后在里面按照相同的格式创建自己的模板

$ fire page my-page

update:

更新项目配置,每次启动项目(start)的时候如果发现配置有更新,就会中断启动项目

你必须更新项目配置才能将项目启动起来,这样做是为了让所有由 fire 管理的项目统一配置

这里不直接内部执行 update 的原因是因为可能有些项目不想升级配置,或者说升级了配置会破坏现有代码的正常运行

当你不想强制更新时,你可以在 fire.config.js 中配置 checkVersion 为 false,这样就不会去检测配置是否更新,但会始终给出警告,不建议你这样做

$ fire update

init:

初始化一个不是由 fire-cli 创建的项目,使其可以被 fire 管理.

  • 项目的目录结构也会被修改成和 fire 生成的项目的目录结构一致.

  • 不会破坏你项目原本存在的目录结构,但是运行和打包配置将会被 fire 管理,原有的配置将失效

  • 由于 fire 是基于 webpack3 以上的,所以如果你原本的配置是基于 webpack3 以下的,那么你的业务代码需要注意的地方如下:

  1. 所有的 module.exports = 需改为 export default
  2. 所有的 require('xxx') 需改为 import xx from 'xx'
  3. 按需加载 require.ensure 需改为 import('xxx') 的方式
  4. 注意 alias 引用别名,fire 管理的项目 alias 会有所改变,具体看下面的 alias
$ fire init

noble:

在 noble 上部署项目的速度大家也都知道,非常的慢,而部署大部分操作的环境是项目环境

所以 fire 提供这个 noble 命令,可几秒内将你的应用部署到项目环境,只有项目环境可用

  • 你必须提供项目环境的服务器 ip 地址,比如 ip 地址是 10.11.45.11

  • 你还必须提供项目名称,不过这个是会自动读取当前项目的 package.json 的 name 字段,不需要你额外配置, 另外如果 name 是以 static-开头的,则会截取 static-后面的字符串作为 name,(这个是为了兼容现有的 static-项目),其他的都直接读取,不会截取,所以这点必须注意

  • 用这个命令部署之前最好先合并一下代码

明确上诉内容之后你就可以执行

$ fire noble 10.11.45.11

如果不想每次都输入一个 ip 的话,可以在项目根目录下建一个 noble 文件夹,然后在此目录下建一个以你的花名拼音命名的 js 文件, 比如你的花名叫胆矾,那么就建一个 danfan.js,然后里面配置一个 serverIP 如下

module.exports = {
  serverIp: '10.11.45.11'
}

之后只需要执行 fire noble 不再需要跟上 ip 了,此命令最后需要你输入密码,密码请@danfan

$ fire noble

fire.config.js

根目录下回创建 fire.config.js 来自定义项目配置,具体可配置的选项如下

//默认的配置
module.exports = {
  //如果你想打包所有页面那么设置: page:'*'
  page: ['example'],
  port: 3000,
  sourceMap: true,
  //http代理
  proxy: {},
  //px2rem:{ remUnit: 37.5 }
  px2rem: null,
  //babel-plugin-import按需加载 比如 imports:'iview'
  imports: null
}

local.config.js

另外可能每个人的配置不一样,但是都改这个文件容易冲突,所以每个人可以本地创建一个 local.config.js

这个 js 配置和 fire.config.js 一样,它会覆盖 fire.config.js 的配置,不过这个文件不会被提交到 git 上,只是你自己使用的, 这样就不会冲突了,

注意:在 noble 上打包的时候,noble 无法知道 local.config.js 的存在的,所以 local.config.js 只是在本地开发或者用 fire noble 命令部署的时候才有作用,

.prettierrc.js

格式化代码的工具,希望大家安装并集成到编辑器中,设置自己喜欢的快捷键进行格式化 使用文档 https://prettier.io/docs/en/install.html 各种编辑器集成方法 https://prettier.io/docs/en/editors.html

自定义 webpack.config.js(不建议)

你可以在根目录下创建一个 webpack.config.js 去覆盖合并默认的 webpack 配置

//webpack.config.js
module.exports = function(defaultWebpackConfig, NODE_ENV) {
  //NODE_ENV is 'start' or 'build'
  return {
    //you webpack config
  }
}

自定义 postcss.config.js(不建议)

和上面一样可以创建 postcss.config.js 加新的插件

//postcss.config.js
module.exports = function(defaultPostcssPlugin, NODE_ENV) {
  return [
    //you postcss plugins
  ]
}

自定义 babel.config.js(不建议)

同理可创建 babel.config.js 去覆盖默认的 babel 配置

//babel.config.js
module.exports = function(defaultBabelConfig) {
  return {
    //you babel options
  }
}

alias

访问别名 alias

  • @env: 不同环境下访问到/src/__BASE__/env 目录下的不同的 js 文件,有 dev、pre、daily、publish,

  • @static: 访问到/static

  • /src/__BASE__目录下的所有一级目录全部会被自动建立对应的 alias,以 '@' 符号开头

全局变量ENV

代码中可以通过__ENV__变量知道当前是处于哪个环境下,其值为字符串 dev、pre、daily、publish 其中之一

async/await

默认支持 async/await

默认集成的依赖及注意事项

  • 创建的项目默认是集成 vue、vue-router、vuex

  • 默认集成 less 预处理器,并且为了统一,由 fire 管理的项目只能用 less 预处理器(其他预处理器会报错)

  • 后续集成我们自己的 UI 库、 utils、网关、接口等。这样一来,大部分项目基本不需要再安装其他依赖了

React 版(针对 PC 端管理系统等应用)

之后会提供 react 版本的(正在开发),也由此 fire 统一管理,目标:

  • 只需要了解 JSX,即可很快的构建出项目,
  • 大部分情况下不用去写 react 的生命周期
  • 不需要学习 redux 等麻烦的状态管理库,也能轻松的管理状态
  • 不需要学习 react-router 只需要一个命令 fire route 即可建立路由,视图
  • 管理系统最多的就是列表、详情,所以期望能实现简单几行代码就能构建复杂列表页
  • 让你爱上 React
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文