• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

etheranl/vue-template: vue-webpack-boilerplate run on koa-grace

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

etheranl/vue-template

开源软件地址:

https://github.com/etheranl/vue-template

开源编程语言:

JavaScript 71.9%

开源软件介绍:

vue-webpack-boilerplate

使用方法

$ cd ~/fe/app/
$ git clone [email protected]:haoranw/vue-template.git grace_boilerplate
$
$ cd grace_boilerplate
$ yarn install(recommended,or use npm install)
$
$ npm run dev

新建页面:

$ npm run auto

依次输入项目名称和页面名称

Feature

  • 随着项目内容的扩展,单个仓储内的vues文件越来越多。 在以往的多入口构建方案中,不支持页面的二级目录。在单个仓储内包含了多个项目的vues文件,并不能很好的区分它们属于哪一个项目模块。
  • 在本构建方案中,相关路径如下:
└── vues               
    ├── _components     
    ├── project1            // project1
    └── project2            // project2
        ├── page1           // page1入口
        ├── page2
        └── page3
            ├── components
            ├── index.js
            ├── index.vue
            └── router.js
  • 为了配合此路径,在通过npm run auto来新建页面时需要输入项目名称。例如新建project1/page1,需要在运行命令之后依次输入project1page1

Config

  • 模板内集成了手淘的flexible适配方案和px2rem的webpack插件 在使用中,需要将/build/rem.conf.js中的remUnit设置为"设计稿的宽度/10",列如设计稿为750px,该值应为75。

  • 页面中元素的宽高等数值,按照设计稿中的像素值编写即可。 例如设计稿中宽150px,高75px的元素:

.selector {
    width: 150px;
    height: 75px;
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

经过编译后会变成:

.selector {
    width: 2rem;
    height: 1rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    font-size: 14px;
}
[data-dpr="2"] .selector {
    font-size: 28px;
}
[data-dpr="3"] .selector {
    font-size: 42px;
}

对于字体大小,建议使用px作为单位。

Todo

  • 新建页面时判断是否存在同名文件
  • 新建页面时生成对应路径的controller
  • 修改prefix配置,提高兼容性
  • 集成flexible && pxtorem的配置
  • 集成vuex
  • 检测项目名称,必须输入已存在的项目名。独立新建项目的指令
  • 不同项目内的同名页面共存



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Equim-chan/koa-virtual-host: A name-based virtual host middleware for Koa2.发布时间:2022-07-10
下一篇:
South-Paw/koa-mongoose: 发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap