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的空間沒有充分利用好，顯得有點華而不實的感受。且一個動畫都還沒作好，這是一個長期的過程。