零基礎搭建先後端分離項目

時間 2019-11-12

標籤零基礎搭建後端分離項目简体版

原文原文鏈接

既然選擇了遠方，便只顧風雨兼程 __ HANS許css

系列：零基礎搭建先後端分離項目

前端

NodeJshtml

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。前端
npm&cmpmvue

npm 是 JavaScript 世界的包管理工具,而且是 Node.js 平臺的默認包管理工具。經過 npm 能夠安裝、共享、分發代碼,管理項目依賴關係。
cnpm 這是一個完整 npmjs.org 鏡像,你能夠用此代替官方版本(只讀),同步頻率目前爲 10分鐘一次以保證儘可能與官方服務同步。node

NPM是隨同NodeJS一塊兒安裝的包管理工具(相似nuget)，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：webpack
- 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
- 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
- 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。
yarnweb

yarn跟npm相似，但各有優缺點，你們能夠看下這篇文章瞭解下：https://www.jianshu.com/p/254794d5e741
Yarn 對你的代碼來講是一個包管理器，你能夠經過它使用全世界開發者的代碼，或者分享本身的代碼。Yarn 作這些快捷、安全、可靠，因此你不用擔憂什麼。npm
Webpack後端

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源api

webpack描述
1. 忽略不用的靜態資源。這對刪減沒必要要的CSS尤爲有用。Webpack只會將你的應用真正須要使用的資源放到dist目錄中
2. 便捷的代碼分裂。例如，你知道你的文件Homepage.js只須要require幾個特定的CSS樣式，Webpack會根據你的須要建立一個homepage.css文件來減小文件體積。
3. 你來控制靜態資源被執行的方式。若是一個圖片大小低於某個特定的值，你能夠用base64來將它轉碼直接引入到你的JavaScript文件中，從而減小HTTP請求次數。若是一個JSON文件太大，那麼你能夠經過一個URL來加載它。你能夠經過require(‘./style.less’)來將less文件自動轉爲純CSS
4. 穩定的生產環境。你不會將不用的圖片或舊的CSS部署到服務器上。
5. 當你熟練掌握了以後用起來會很是快。你能夠熱更新頁面，管理正確地CSS，自動更新CDN緩存。Webpack能夠自動更新文件名及相關內容。
Sass

Sass 是一個 CSS 的擴展，它在 CSS 語法的基礎上，容許您使用變量 (variables), 嵌套規則 (nested rules), 混合 (mixins), 導入 (inline imports) 等功能，令 CSS 更增強大與優雅。使用 Sass 以及 Compass 樣式庫有助於更好地組織管理樣式文件，以及更高效地開發項目。
Less

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。
Less 能夠運行在 Node 或瀏覽器端。
TypeScript

TypeScript是JavaScript類型的超集,它能夠編譯成純JavaScript。 TypeScript能夠在任何瀏覽器、任何計算機和任何操做系統上運行，而且是開源的。
Vue

Vue.js（讀音 /vjuː/, 相似於 view）是一個構建數據驅動的 web 界面的漸進式框架。
Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。它不只易於上手，還便於與第三方庫或既有項目整合。
另外一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也徹底可以爲複雜的單頁應用程序提供驅動。