Skip to content

etheranl/vue-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
  • 检测项目名称,必须输入已存在的项目名。独立新建项目的指令
  • 不同项目内的同名页面共存

About

vue-webpack-boilerplate run on koa-grace

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published