2020前端实践|优雅的实现一个全栈项目（一）

时间 2020-02-16

标签前端实践优雅实现一个项目繁體版

原文原文链接

vweb_visual是一个简单的后台管理项目，疫情在家为了避免无聊抽时间写的，一来呢本身的github有点空荡荡的，想一想本身已经步入社会，不能像学生时代同样以为时间充足。因此下定决心作一个长期维护的全栈项目，不只仅是为了本身的成长。css

技术选型

UI框架： iview
前端框架： Vue.js + Typescript.js
请求库：Axios
样式编译： sass
模拟库： easymock
图表：AntVG2
图标： iconfont图标
布局选型：flex + rem布局

项目安装

1.将项目克隆到本地html

git clone https://github.com/wangly19/bweb_visual_vue.git
复制代码

2.安装依赖前端

npm install
yarn install
复制代码

3.跑动项目vue

npm run serve
复制代码

前言

当我使用typescript做为和vue.js搭档的时候。我对于ts在vue的使用是一无所知的，随着项目的进行，也慢慢的对于ts驾轻就熟，可是我忽然发现了在vue2中使用ts，自己是一件很是坑的事情，类型验证的优点反而没有起到预想中的做用，甚至ts自己的功能都没有发挥出来，不过优势也是有的，代码折叠很是的优雅。因此既然都进坑了，那么爬出来是有必要的。react

axios 碰上 restful

如今的数据都是mock去模拟出来用来展现的，为了页面不显得突兀。因此数据是不规范的，难以阅读的。接口也是使用了分离式，没有和view层放在一块儿。统一放在了api文件中。遵照restfulAPI（我只在设备管理中作了一个大概）后续会在nest.js中继续完善。ios

放出一个请求实例nginx

import service from '@/api/axios.config'

// get & post 请求 => 资源统一用parmas
export function tradDevice<T>(params: T, type: string): Promise<any> {
  return service({
    url: `/device`,
    method: type,
    params
  })
}

// put & delete 须要带上数据的id
export function alterDevice<T>(id: number, params: T, type: string): Promise<any> {
  return service({
    url: `/device/${id}`,
    method: type,
    params
  })
}
复制代码

看过不少大佬的项目，基本都是将请求层独立出来，其实我是比较喜欢的，当api请求出错时，我只须要去定位请求层而后更改请求的代码就OK了。而不须要在万军丛中去更改this.$axios(xxxx)等一系列的代码，保证在view层中利用async/await作出处理。架构清晰，保证可读性。git

样式重置

在项目中是引入了normalize.css v8.0.1，这是一个很是好用的css，配合上本身经常使用的一些样式重置，可以知足大部分的项目所需。是一个很是好的项目。github

rem适配

这里贴上我的的一个rem适配方案。方案不表明最优，只是本身用的舒服罢了。若是您以为有用，不妨在项目中继续完善它。web

resetPageSize.ts

/** * @author: wangly * 页面fontsize重置 */
(function (window: Window): void {
  window.addEventListener('resize', function () {
    document.documentElement.style.fontSize = `${getWindowSize() / 10}px` // 按照设计图
  })
  document.documentElement.style.fontSize = `${getWindowSize() / 10}px` // 按照设计图
  console.warn('当前的设计图rem: ', getWindowSize())
})(window)

/** * 获取字体大小 * @return 获取当前页面的宽度 */
function getWindowSize (): number {
  const __width: number = document.documentElement.clientWidth
  return __width > 1920 ? 1920 : __width
}
复制代码

main.ts

// 引入rem根字体大小
import '@/tools/resetPageSize'
复制代码

scss转换方法

@function rem($px){
  $remSize: $px / 192px;
  @return $remSize * 1rem;
}
复制代码

使用方式

html{
  height: rem(192px); // => 1rem
}
复制代码

flex & postion 等mixins

当你须要反复的去写一个flex布局，position布局，不妨尝试一下sass mixins，它会很好的去帮助你生成须要的样式，且精简。

// flex布局
@mixin flex($justify: flex-start, $align: flex-start, $direction: row) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-direction: $direction;
}

// position定位
@mixin position($position: relative, $top: initial, $right: initial, $bottom: initial, $left: initial) {
  position: $position;
  left: $left;
  right: $right;
  bottom: $bottom;
  top: $top,
}
复制代码

固然，对于圆角和zinde我也会作留一手

// 设置层级
@mixin zIndex($zindex: 0) {
  z-index: $zindex;
}

// 圆角
@mixin radius($px: 0) {
  border-radius: $px;
}
复制代码

ts方法库

这个后续会抽成一个单章，提早拉出来溜溜。由于能说的太多了。每一个人都有本身的骚东西。不是吗QAQ。

export function cssExpand<T>(css: T, id: string) {
  let style: HTMLStyleElement = document.createElement('style')
  style.type = "text/css"
  style.innerHTML = `@charset "UTF-8"; ${css}`
  if (id) {
    let $style: HTMLElement | null = document.getElementById(id)
    if ($style != null) $style.outerHTML = ''
    style.id = id
  }
  // 应用新样式
  document.head.appendChild(style)
}
复制代码

布局设计

布局采用传统的葫芦式布局，顺序分别以下: 头部 >>> 导航 >>> 内容 + 抽屉设计。比较符合审美，easymock的官网也是相同的设计。这点我确实是抄袭他的，在本身的想法上进行更改。无异因而很是适合iview的。若是你们以为不错，能够给个星星给我哦。当前缺点也很明显啦，toolbar的空间没有充分利用好，显得有点华而不实的感受。且一个动画都还没作好，这是一个长期的过程。