Needling Perl Mongers

    generator-easy-vue

    0.4.1 • Public • Published

    generator-easy-vue

    a generator for a super vue

    此项目为开箱即用的vue项目生成器,几乎项目中用到的所有东西都一配置好,让你写代码如丝滑般顺滑~

    功能

    1. 支持可选reset.css/normalize.css
    2. 支持可选 rem布局/vw布局
    3. 等比例宽高容器 一像素边框等移动端解决方案
    4. 支持可选less sass css预处理器
    5. 动态加载路由
    6. 自动注入全局组件
    7. 预渲染骨架屏
    8. 按需(按照指定的浏览器环境所需)引入polyfill
    9. axios 简易配置 拦截器配置 全局拦截 超时提示等
    10. vuex 简易配置
    11. vue-router简易配置
    12. build 自动压缩图片
    13. 重写image publicPath
    14. 跨域反向代理案例
    15. 简易路由动画配置
    16. 常用组件库 插件库(alert confirm loading toast) 工具库
    17. 多页面应用以及一键生成页面命令
    18. 注释自动生成说明文档配置
    19. 增加代码检测工作流 precommit自动美化格式以及修复代码,多人写作避免代码冲突,渐进式lint代码
    20. dns预加载配置
    21. 动态链接库dll配置
    22. css打包大小优化配置 设置全局css等
    23. postcss插件配置
    24. css的tree shake配置
    

    0.1.4

    增加多页面应用
    

    0.1.8

    增加一键生成多页面应用
    

    0.2.0

    增加jsdoc配置 自动生成说明文档 增加对.vue文件的文档解析 jsdoc jsdoc-vue
    

    0.2.1

    1. 增加代码检测工作流 prettier统一代码格式 precommit自动美化格式以及修复代码 lint-staged
    2. 多人写作避免代码冲突,渐进式lint代码
    3. 如果想要启用官方推荐的standard 可在.eslintrc.js中开启
    

    0.2.2

    开启可配置dns预解析
    

    0.2.3

    开启动态链接库dll并自动插入到模板中新增插件 DllPlugin,DllReferencePlugin,html-webpack-include-assets-plugin,cross-env
    

    动态链接库修改在config/dll.lib.dependencies.js 默认只用了vue,vue-router

    0.3.0

    实战之后的优化以及埋坑
    
    1. css打包大小优化
    2. 常用css方案(渐变兼容IE9 一像素边框 二倍图三倍图 iphoneX适配 等)
    3. axios配置优化
    4. 增加常见组件库 插件库 工具库
    

    ps: 非常棒的preload prefetch and JavaScript源代码优化工具prepack 相关插件不支持webpack3.X 💔 后期考虑升级webpack4+ or在vue-cli3基础上重新配置...

    0.3.3

    1. 增加测试环境:开发环境接口 -> **mock**,测试环境走 ->**proxy**,生产环境直接打包线上全路径
    2. 增加eventBus事件总线,挂载vue 全局调用
    3. 修改loading插件样式
    4. 请求增加超时提示,超时时间为10s
    5. vw布局插件升级,支持排除node_momdules插件包,rem布局暂不支持。可换插件postcss-px2rem-exclude  or px2rem-exclude
    

    0.3.9

    路由动画 router zIndex控制层级
    

    0.4.0

    - css tree shake净化css, config/index配置purgecssPath
    - postcss插件替换 postcss-preset-env替代cssnext 默认stage:2
    

    初始化项目

    初始化骨架屏

    自动生成页面

    骨架屏效果

    Installation

    npm install -g yo
    npm install -g generator-easy-vue

    Then generate your new project:

    yo easy-vue   一键生成可配置项目
    # install dependencies
    npm install or yarn install
     
    # 生成骨架屏(仅需要运行一次!)
    npm run skeleton
     
    # 生成开发环境下dll
    npm run dll:dev
     
    # 生成生产环境下dll
    npm run dll:build
     
    # eslint 代码检测
    npm run eslint
     
    # eslint 代码修复
    npm run eslint:fix
     
    # 代码格式化 (多人协作不建议使用,git commit 自动美化 eslint:fix自己修改部分的代码)
    npm run prettier
     
    #生成代码文档(jsdoc格式注释代码)
    npm run jsdoc
     
    # serve with hot reload at localhost:8080(自动 dll开发环境代码,并insert到html模板)
    npm run dev or npm run start
     
    #  rebuild钩子生成盛传环境dll 并eslint 代码
    npm run prebuild
     
    # build for production with minification(自动 dll生成环境代码,并insert到html模板已配置好publicPath)
    npm run build
     
    # build for production and view the bundle analyzer report
    npm run build --report
     
    #配置 publicPath imagePublicPath 或修改 config/index.js
    yo easy-vue:imagePublicPath path...
    yo easy-vue:publicPath path...
     
    # 一键生成页面
    yo easy-vue:page pageName  一键生成page
    yo easy-vue:mpage pageName  一键生成mutil-page(if you choose MPA)

    项目相关依赖

    dependencies

    fastclick
    amfe-flexible
    axios
    vuex
    vue
    vue-router
    

    devDependencies

    less
    less-loader
    node-sass
    sass-loader
    postcss-pxtorem
    image-webpack-plugin
    vue-server-renderer
    vue-skeleton-webpack-plugin
    postcss-aspect-ratio-mini
    postcss-px-to-viewport
    postcss-write-svg
    postcss-cssnext
    style-resources-loader
    postcss-viewport-units 已弃用
    style
    cssnano
    cssnano-preset-advanced
    babel-eslint eslint eslint-config-standard eslint-friendly-formatter eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue
    lint-staged
    husky
    prettier
    jsdoc
    jsdoc-vue
    DllPlugin
    DllReferencePlugin
    html-webpack-include-assets-plugin
    cross-env
    ....
    

    目录结构

    .
    ├── build                                       // 启动文件
    │   ├── build
    │   ├── check-versions.js
    │   ├── logo.png
    │   ├── commit-css-webpack-plugin.js             //骨架屏相关插件
    │   ├── utils.js
    │   ├── vue-loader.conf.js
    │   ├── webpack.base.conf.js
    │   ├── webpack.dev.conf.js
    │   ├── webpack.prod.conf.js
    │   ├── webpack.test.conf.js
    │   ├── webpack.dll.conf.js                      //dll动态连接库
    │   ├── webpack.skeleton.conf.js                 //生成骨架屏
    ├── config                                       // 项目环境配置
    │   ├── index.js                                 // 入口
    │   ├── dll.libs.dependencies.js                 // dll所需库配置
    │   ├── dev.env.js                               // 开发环境配置
    │   ├── prod.env.js                              // 生成环境配置
    │   ├── test.env.js                              // 测试环境配置
    ├── dist                                         // 上线打包
    │   ├── modules                                  // 多页面
    │   ├── static
    │   │   ├── css
    │   │   ├── js
    │   │   └── libs                                 //动态链接库文件
    ├── jsdoc                                        // jsdoc 注释自动生成文档
    ├── src                                          // 源码目录
    │   ├── assets
    │   ├── components
    │   ├── config
    │   │   ├── apis.js                              //封装接口
    │   │   ├── axiosConfig.js                       //配置axios
    │   │   ├── env.js                               //根据环境配置 切换接口baseURL && history模式路由配置
    │   ├── mixins
    │   ├── modules                                  //多页面
    │   ├── pages
    │   ├── plugin                                   //手写vue插件
    │   ├── filters                                  //过滤器
    │   ├── direction                                //directions
    │   ├── router
    │   ├── store                                    // 初始化vuex
    │   ├── eventBus                                 // 事件总线
    │   ├── utils
    │   ├── APP.vue
    │   ├── mian.js
    │   ├── skeleton.entry.js                          //骨架屏配置
    ├── static
    ├── .babelrc
    ├── .editorconfig
    ├── eslintrc.js
    ├── .eslintignore
    ├── .gitignore
    ├── postcssrc.js
    ├── index.html
    ├── jsdoc.cong.json                               //jsdoc配置文件
    ├── .index
    ├── package.json
    ├── package-lock.json
    └── README.md
    

    vue项目生成器

    地址项目生成器

    License

    MIT © wangmeng

    Install

    npm i generator-easy-vue

    DownloadsWeekly Downloads

    5

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    1.09 MB

    Total Files

    115

    Last publish

    Collaborators

    • gblw