2dfire-cli

vue 多页面脚手架 2dfire-cli

安装

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

所提供的命令

create:

创建一个由 fire 管理的项目

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

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

打包项目: 在根目录下执行 npm run build 或 yarn build

$ fire create my-project

page:

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

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

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

$ fire page my-page

update:

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

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

当然你也可以在 fire.config.js 中配置 checkVersion 为 false，这样就不会去检测配置是否更新，但是不建议这样做

$ fire update

init：

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

这个命令可能存在风险，如果你的项目和 fire 创建的项目结构相差很大，那么就可能会初始化失败，起码要保证 src 和 page 这两个目录一样

$ fire init

noble

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

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

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

那么你可以执行

$ fire noble 10.11.45.11

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

module.exports={
    serverIp:'10.11.45.11'
}

之后只需要执行 fire noble 不再需要跟上 ip 了

$ fire noble

自定义 fire.config.js

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

//默认的配置
module.exports = {
  //如果你想打包所有页面那么设置: page:'*'
  page: ['example'],
  port: 3000,
  sourceMap: true,
  //http代理
  proxy: {},
  publicPath: '../',
  //px2rem:{ remUnit: 37.5 }
  px2rem: null
}

local.config.js

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

这个 js 配置和 fire.config.js 一样，它会覆盖 fire.config.js 的配置，不过这个文件不会被提交到 git 上，只是你自己使用的 这样就不回冲突了，但是在 noble 上打包的时候必须知道 fire.config.js 中的 page，publicPath，px2rem 所以建议除了这三个选项，其他选项都写在 local.config.js 中

.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

• '@styles' 访问到/src/BASE/styles
• '@utils': 访问到/src/BASE/utils,
• '@env': 不同环境下访问到/src/BASE/env 目录下的不同的 js 文件，有 dev、pre、daily、publish,
• '@static': 访问到/static

全局变量ENV

代码中可以通过ENV变量来知道当前是处于哪个环境下，其值为 dev、pre、daily、publish 其中之一

async/await

默认支持 async/await

默认集成的依赖

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

后续希望能集成我们自己的 UI 库，pc 一套，移动端一套，再集成自己的 utils

这样一来，大部分项目基本不需要再安装其他依赖了