Vue + Node + Element UI 项目(三)_页面编写准备工作

1. 文件存放说明

1.1 src/assets 公共样式文件均存放在该目录

## 文件夹结构说明
common    common在src/view目录下的main.js中引用，公共类和覆盖掉Element UI的
colors     页面常用的颜色变量汇总，不直接编译。
mixin     文字对齐方式和浮动，不直接编译。
layout  页面常用的字体、边距、颜色变量汇总，不直接编译。
asideLayout   侧边栏+顶部信息+main的样式，不直接编译。

• common.scss

/* 改变主题色变量 */
@import "colors";

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

/** 
 *  通用类
 */
* 
{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  -webkit-user-select: none;

  outline: none;

  padding: 0;
  margin:0;

  -webkit-tap-highlight-color: transparent;
}

.clearfix:before, 
.clearfix:after
{
  display: table;
  content: ' ';
}

.clearfix:after
{
  clear: both;
}

• _layout.scss

/* colors  */
 @import "colors"; 
 
/* 边距  */
$--lenght-xs: 4px !default;
$--lenght-s: 8px !default;
$--lenght-m: 12px !default;
$--lenght-l: 16px !default;
$--lenght-xl: 20px !default;
$--lenght-xll: 24px !default;
$--lenght-xlll: 32px !default;

/* Typography
-------------------------- */
/// fontSize|1|Font Size|0
$--font-size-extra-large: 20px !default;
/// fontSize|1|Font Size|0
$--font-size-large: 18px !default;
/// fontSize|1|Font Size|0
$--font-size-medium: 16px !default;
/// fontSize|1|Font Size|0
$--font-size-base: 14px !default;
/// fontSize|1|Font Size|0
$--font-size-small: 13px !default;
/// fontSize|1|Font Size|0
$--font-size-extra-small: 12px !default;
/// fontWeight|1|Font Weight|1
$--font-weight-primary: 500 !default;
/// fontWeight|1|Font Weight|1
$--font-weight-secondary: 100 !default;
/// fontLineHeight|1|Line Height|2
$--font-line-height-primary: 24px !default;
/// fontLineHeight|1|Line Height|2
$--font-line-height-secondary: 16px !default;

• _mixin.scss
  

1.2 static 静态背景图均存放在该目录

【注】 单页面img 引入的图片可与单页面存放在同一目录。

1.3 view 开发页面存放目录

说明：

• 同一模块放在同一个目录中
• 页面样式单独拿出来保存为一个scss
• 页面img引入的图片放在目录中img的文件夹中

标签：Node,Vue,Font,--,lenght,Element,default,font,页面
来源： https://www.cnblogs.com/lanyuan3/p/14200374.html