@reasy-team/reasy-vue-cli

Reasy-vue-cli

Reasy Team基于Vue、Vue-router、@reasy-team/reasy-ui-vue、YApi、mock-mini-server的快速项目搭建脚手架

集成以下功能配置

• b28翻译机制，全局注入翻译函数Vue.prototype._
• 本地假数据服务器YApi/mock-mini-server
• Vue-router, Vue, axios, @reasy-team/reasy-ui-vue
• 项目模板生成

安装和使用

# 安装
npm i @reasy-team/reasy-vue-cli -g

# 使用，myApp为项目路径
reasy-vue-cli myApp
cd myApp

# 开发环境
npm run dev

# 生成dll
npm run dll

# 生成环境
npm run build

# 开启mock-mini-server
npm run server

其中myApp为初始化项目的跟目录，当前路径下存在myApp文件夹，直接使用，不存在则在当前路径下创建该文件夹

目录结构

├── build # 编译相关，template转ast转render函数
    ├── dll # dll依赖处理，避免重复打包
        ├── generator.js # dll配置文件生成器
        ├── venders.js # dll合并规则配置文件
    ├── webpack.base.config.js # 基础配置
    ├── webpack.dev.config.js # 开发环境配置
    ├── webpack.dll.config.js # dllPlugin配置
    ├── webpack.prod.config.js # 生成环境配置
├── config # 开发环境配置项
├── src # 项目初始化源码目录
    ├── assets # 静态文件
    ├── css # 公共css文件
        ├── vars.scss # 全局CSS变量
    ├── goform # 假数据文件
    ├── libs # 工具类
        ├── http.js # 基于axios的http请求封装
        ├── util.js # 工具函数
        ├── validate.js # 数据校验
    ├── pages # Vue页面文件
        ├── components # Vue组件
        ├── modules # 各模块文件
        ├── index.vue # 首页
        ├── login.vue # 登录页
        ├── quickset.vue # 快速设置页
        ├── navigator.vue # 导航菜单
    ├── router # 路由相关配置
        ├── config.js # 导航信息配置文件
        ├── index.js # Vue-router配置文件
    ├── App.vue # 入口文件
    ├── main.js # 入口文件
├── .babelrc # babel配置文件
├── .eslintignore # eslint ignore
├── .eslintrc.js # eslint配置
├── index.ejs # 模板页
├── mockDebug.js # mock-mini-server中间件调试文件
├── mockhttp.js # mock-mini-server配置文件
├── package.json # 项目信息文件
├── postcss.config.js # postcss配置文件

说明

• 如果使用YApi则可忽略mock-mini-server相关配置
• mock-mini-server通过开发中间件，可以实现数据的CRUD(Create, Read, Update, Delete)操作
• 如需使用VUEX，请自行安装，同时修改build/dll/venders中的配置，加入dll打包中去
• 提供的pages中的模板仅供参考，可以使用，也可以删除
• 提供的router中的配置仅供参考，可以使用，也可以删除
• 对于goform的删除和位置修改，需要同步修改webpack.prod.config.js和webpack.dev.config.js中的配置
• css/vars.scss中的css变量与组件是保持一致的，故不能随意修改组件相关的变量，以免风格不统一
• 运行npm run build需要确保npm run dll已被运行过生成相应的dll文件

语言相关

全局注入翻译函数Vue.prototype._，这样在所有的组件上都能通过this._('xxx')去调用翻译函数，当然window._('xxx')依然有效，对于template中的词条需要如下书写形式才能正确的进行翻译

<template>
    <a href="/logout">{{_('Logout')}}</a>
</template>