Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/webpersonalserver/vue2.0-template

vue2.0 基础模板（稳定版，模板设置了px和rem的自动转化，主要面向移动端开发，如果要面向PC端开发，可去除px和rem的自行转化）
https://github.com/webpersonalserver/vue2.0-template

sass vue2 webpack3

Last synced: 6 days ago
JSON representation

vue2.0 基础模板（稳定版，模板设置了px和rem的自动转化，主要面向移动端开发，如果要面向PC端开发，可去除px和rem的自行转化）

Host: GitHub
URL: https://github.com/webpersonalserver/vue2.0-template
Owner: webpersonalserver
Created: 2018-12-10T06:02:51.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2022-02-10T16:22:08.000Z (over 2 years ago)
Last Synced: 2024-09-24T20:02:14.650Z (9 days ago)
Topics: sass, vue2, webpack3
Language: JavaScript
Size: 705 KB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 6
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# vue2.0-template

使用 vue2.0 搭建的基础模板,模板中主要集成了 `vue-router`、`vuex`、`cube-ui`、`sass`、`axios`

`vue-router`：https://router.vuejs.org/zh/

`vuex`：https://vuex.vuejs.org/zh/guide/

`cube-ui`（基于vue的移动端UI框架）：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

`sass`：https://www.sass.hk/

`axios`：https://www.kancloud.cn/yunye/axios/234845

## 开始使用

开发流程：
1. `git clone` 克隆此项目
2. `npm install` 安装项目依赖
3. `npm run dev` 启动项目，进入开发模式
4. `npm run build` 打包正式项目包
5. `npm run unit` run unit tests
6. `npm run e2e` un e2e tests
7. `npm test` run all tests

## 特别说明

默认使用750px设计稿进行移动端自适应开发，开发时使用px单位即可，编译时会自动转化为相应的rem。也可自行修改设计稿尺寸，可在根目录的build/utils.js 文件的 cssLoaders 方法中的 px2remLoader 处进行修改
1. 直接写px，编译后会直接转化成rem —- 除开下面两种情况，其他长度用这个
2. 在px后面添加/no/，不会转化px，会原样输出。 — 一般border需用这个
3. 在px后面添加/px/,会根据dpr的不同，生成三套代码。—- 一般字体需用这个
编译前：.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
编译后：.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}
4. 设置除font-size以外的尺寸时，使用mini(750px),如：width: mini(750px)