zc-vue-cli

v0.0.1

Published

2 years ago

cli

Downloads

0High
0Medium
0Low

zhangchao

vue 多页面脚手架 zc-vue-cli

安装使用

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

安装之后就可以全局使用 fire 命令

创建一个全新的项目

$ fire create my-project

创建一个由 fire 管理的项目

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

启动项目: 在根目录下执行 npm run dev 或 yarn dev
打包项目: 在根目录下执行 npm run build 或 yarn build
如果启动项目时遇到 cannot find module 'xxx' 错误时，那就 npm install 或者 yarn 重新安装一下依赖
有些 npm 包特别是 eslint 在安装时可能会报错说这个包在 npm 上找不到，这可能是你 npm 源不对，你可以设置到 npm 淘宝源，再重新安装

创建的工程中无需安装 vue、vue-router、vuex、axios、vue-i18n

特别要注意这点，因为默认自带了这些库，所以不需要再次安装，否则会报错之所以把这几个库集成进去，是因为希望这几个核心库的版本能统一由脚手架管理

判断一个项目是不是由 @fire/cli 创建的

项目根目录下会存在 fire.config.js
package.json 的中有 @2dfire/server 依赖此依赖为当前项目提供各种服务
项目必须存在 src 和 page 这两个目录

如何在一个 fire 项目中创建一个新的页面

# 在项目根目录执行
$ fire page my-page

使用这个命令之后，会列出很多模板列表，你必须选择一个作为创建 my-page 页面的模板

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

为一个页面创建一个路由界面

# 在项目根目录执行
$ fire route my-route

使用这个命令会自动给当前你正在开发的页面创建一个按需加载路由界面

更新 fire 项目配置

# 在项目根目录执行
$ fire update

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

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

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

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

初始化项目

$ fire 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.config.js

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

//所有的可配置项案例
module.exports = {
  /*
  有多种写法
  page: 'example',打包单个页面
  page: ['demo1','demo2'],打包多个指定页面
  page: ['demo1','demo2','#demo3'],用#指定以哪个页面自动打开游览器，默认数组第一个
  page: "*",打包所有页面
  page: ['*','!demo'],打包除了demo以外的所有页面
  */
  page: ['example'],
  //启用的端口号
  port: 3000,
  /*
  打包之后的引用资源的不同环境下的域名(注意最后的/一定要加),
    xxx是你在noble上的部署应用名，脚手架无法知道，所以需要你自己写
   */
  publicPath(env) {
    return {
      dev: '../',
      daily: 'http://d.2dfire-daily.com/xxx/',
      pre: 'http://d.2dfire-pre.com/xxx/',
      publish: 'https://d.2dfire.com/xxx/'
    }[env]
  },
  //pxtorem配置了之后会自动加载flexible脚本，无需手动引入，pc端置为null，
  pxtorem: { rootValue: 37.5 },
  /*
  只适用于使用babel-plugin-import插件按需加载的库,比如
  imports:'iview',imports:'vant',imports:'ant-design-vue'
   */
  imports: null,
  /*
  这个配置只针对于ant-design-vue和vant两个UI框架，是修改主题的，具体所有主题less变量参考
    ant-design-vue：https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less
     vant:https://github.com/youzan/vant/blob/dev/packages/style/var.less
   */
  theme: {},
  //自定义访问别名，当自定义的别名和默认内置的别名冲突时，会忽略自定义别名并给出提示
  alias: {}
}

config.js

src 目录下的每一个页面的根目录下可以建一个 config.js,用来为该页面单独配置相关信息，只对该页面起效比如 src 下的 example 目录的下建 config.js

后续加入更多配置项，目前只有以下配置项

module.exports = {
  /*
  初始化vConsole,设置为true的时候在publish环境下始终无效
  还可以是个函数，第一个参数是env，可以更具env返回true或者false
   */
  vConsole: false,
  /*
  vConsole(env) {
      return {
        dev: true,
        pre: true,
        daily: true,
        publish: false
      }[env]
    }
   */
  //接口的代理
  proxy: {}
}

alias

内置的默认访问别名 alias

@env: 不同环境下访问到/src/__BASE__/env 目录下的不同的 js 文件，有 dev、pre、daily、publish,
@static: 访问到/static
/src/__BASE__目录下的所有一级目录全部会被自动建立对应的 alias，以 '@' 符号开头

全局变量ENV

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

所以有了__ENV__变量后，__BASE__/env 文件夹是可以不需要的，也建议不要用，之所以加了这个文件夹是为了保持和以前的项目统一

async/await

默认支持 async/await

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

创建的项目默认是集成 vue、vue-router、vuex、axios、@2dfire/share、vue-i18n、vant 所以这些你不需要再次安装
默认集成 less 预处理器，并且为了统一，由 fire 管理的项目只能用 less 预处理器(其他预处理器会报错)

关于内置的@2dfire/share

这是一个工具类仓库,里面有很多方法，包括 cookie，query，GW(网关等)，为什么要内置这样一个库？之前我们会用到很多工具，比如网关会用到@2dfire/gw-params, cookie 会用到 js-cookie ,还有其他各种这样导致的问题是我要用一个方法都搞不清楚到底哪个库里有，所以我将这些所有的方法全部移到一个库@2dfire/share 里以后只要维护这一个库就好了，后续会不断在里面增加方法,里面具体有哪些方法请参考: http://git.2dfire-inc.com/core-support/fire-share/blob/master/README.md

vant

内置一个移动端 UI 库 vant，使用文档 https://youzan.github.io/vant/#/zh-CN/quickstart

默认不开启按需加载，如果要开启使用，需做如下配置

修改 fire.config.js 如下

//fire.config.js
module.exports = {
  imports: 'vant' //按需加载vant的js和css
  //...
}

具体使用示例

<template>
  <div><button @click="handle" type="primary">按钮</button></div>
</template>
<script>
//无需引用css，直接引入即用，按需加载js和css
import { Button } from 'vant'
export default {
  components: {
    Button
  },
  methods: {
    handle() {
      console.log('button')
    }
  }
}
</script>