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

安装使用

$ npm install hlj-vue-cli -g
# OR
$ yarn global add hlj-vue-cli

安装之后就可以全局使用 hlj-vue 命令

创建一个全新的项目

$ hlj-vue create my-project

创建一个由 hlj-vue 管理的项目

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

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

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

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

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

如何在一个工程中创建一个新的页面

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

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

所有的模板都在 github 上: https://github.com/ZC828/zc-vue-page-boilerplate 后续可以增加一些常用模板

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

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

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

更新项目配置

# 在项目根目录执行
$ hlj-vue update

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

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

初始化项目

$ hlj-vue init

初始化一个不是由 hlj-vue-cli 创建的项目或者一个空项目.

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

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

zc.config.js

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

//所有的可配置项案例
module.exports = {
  /*
  有多种写法
  page: 'example',打包单个页面
  page: ['demo1','demo2'],打包多个指定页面
  page: ['demo1','demo2','#demo3'],用#指定以哪个页面自动打开游览器，默认数组第一个
  page: "*",打包所有页面
  page: ['*','!demo'],打包除了demo以外的所有页面
  */
  page: ['example'],
  //启用的端口号
  port: 3000,
  /*
  打包之后的引用资源的不同环境下的域名(注意最后的/一定要加),
   */
  publicPath(env) {
    return {
      dev: '../',
      pre: '../',
      publish: '../'
      //...
    }[env]
  },
  //pxtorem配置了之后会自动加载flexible脚本，无需手动引入，pc端置为null，
  pxtorem: { rootValue: 37.5 }
}

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: {},
  // 替换html中的某些指定内容
  htmlReplace: {},
  /*
    这个配置只针对于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: null
}

alias

内置的默认访问别名 alias

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

• @static: 访问到/static

• 根据 zc.config.js 中的 page 建立对应的 alias，比如 page 配置的是 example，那么直接可以@example

全局变量__ENV__

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

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

async/await

默认支持 async/await

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

• 创建的项目默认是集成 vue、vue-router、vuex、axios、hlj-share、vue-i18n、vant 所以这些你不需要再次安装

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