1 前端工程化流程
在知乎上看到 趙雨森同學 提到前端工程化有四個方面，模組化、元件化、規範化、自動化，本人十分贊同，我在工作中也慢慢這幾個方向作出了總結
1.1 模組化
模組化只是在語言層面上，對**的拆分；而元件化是基於模組化，在設計層面上，對ui（使用者介面）的拆分
1.1.1 js 的模組化
現在es6已經在語言層面上規定了模組系統，完全可以取代現有的commonjs和amd規範，而且使用起來相當簡潔
1.1.2 css 的模組化
目前使用了這三方式處理:
1.2 元件化
元件化是基於模組化的，因為元件的單位可以有模板，樣式加邏輯。
另，將你所能看見到的檢視(ui)進行合理拆分得到的單元，並能讓它達到可復用程度，可稱之為元件。元件的方案採用 vuejs 的單檔案元件
1.3 規範化
為了更好的落實開發，可以制定一些規範
1.3.1 編碼規範
1.3.2 前後端介面規範
1.3.3 版本控制
node module 遵循unix的思想–do one thing and do it well，也因此單個上層的模組會依賴很多下層的模組，這可能會導致其中乙個下層的模組改變，導致整個上層模組崩潰。
package.json 裡的包版本號應寫死，除非因某個包有了新需求特性，再去更新
1.3.4 目錄結構
檔名一律小寫，參考（
採用就近原則
1.3.5 編碼規範
長命名使用駝峰式。類使用 `classname`，而方法名或屬性使用 `classproperty`
1.3.6 協作工具
這裡指的是協作工具的採用
1.3.7 其它規範
1.4 自動化
1.4.1 環境控制
使用docker自動化部署，集群使用 kubernetes(k8s)
1.4.2 構建工具
目前使用webpack/rollup
1.4.3 持續化整合
1.4.4 專案徽章
無論是開源專案還是私有專案都可以使用徽章檢視狀態
2 前端技術選型
基於以上工程化流程，技術選型如下：
3 前端專案配置
3.1 css
3.1.1 reset
css reset 採用 normalize.css
3.1.2 布局
不考慮相容的情況下，一維用 flexbox，二維用 css grid，單位 rem/vm vw，更改盒模型為 box-sizing減少padding和border的計算；考慮相容性則使用 bootstrap3 提供的grid布局方案
3.1.3 動畫庫
hover，animate.css，velocity
3.1.4 sass
sass 存在 duplicate import problem
暫時沒去解決，現有以下可以解決辦法
結論是盡量不要使用引用, variable或者function之類的可以使用
參考位址
3.2 webpack
3.2.1 noparse
webpack會花很多的時間查詢乙個庫的依賴，使用該引數可以在webpack 中忽略對已知檔案的解析
例如，這裡我們可以確定 vue 是沒有依賴項的，配置如下
// 支援正則匹配檔名module :
}
這樣我們在專案中可以使用
import vue from 'vue'
3.2.2 alias
為引入模組提供別名，這個可以減少webpack去查詢引入模組位置的時間，同時也為我們開發中引入公用模組提供方便
resolve:}
以上配置可以讓我們在需要引用公用元件時不必考慮目錄層級的問題
import modal from 'ui/modal.vue'
css如果要使用webpack中的alias，需要在alias名前加上 ~
@font-face
3.2.3 uglifyjs
// 去除consolenew webpack.optimize.uglifyjsplugin(,
}),
3.2.4 todo tree shaking
讓webpack理解es6 的匯入機制，例如現在有兩個檔案
// utils.jsexport function foo()
export function bar()
import from './utils'
/***/ function(module, exports) );exports.foo = foo;
exports.bar = bar;
// utils.js
function foo()
function bar()
/***/ }
可以看到上面包含了 foo 和 bar 兩個函式，把utils裡的內容全部打包進去了，如果使用tree-shaking，輸出結果是這樣的
/***/ (function(module, __webpack_exports__, __webpack_require__)function bar()
/***/ }),
我們可以看到哪些方法是沒有被使用的，你可以通過 --optimize-minimize 引數壓縮**剔除未被使用的函式
// 指令碼"scripts":
// 通過格式工具檢視到的結果
function(t, e, n)
e.a = r
}
已經沒有bar了
3.3 babel
在專案下建立乙個 .babelrc 的配置檔案。目前通過外掛程式babel主要提供了以下幾個功能
3.4 效能
3.4.1 todo
3.5 前端常用庫
待補充
4 最後
附上乙個後台專案 demo（
出處：
-end-
專案前端小結
解壓安裝 node v10.14.2 x64.msi 一直下一步。在命令列視窗 node v 檢視版本號 node v在命令列視窗 admin執行 屬性關閉快速編輯模式 安裝npm 前端伺服器庫 npm install 解壓前端專案在 projectname config 修改dev.env.js ...
vue專案前端架構設計
為更好地實施我們的業務需求，需要一些規則或思考來幫助我們設計架構我們的前端工程,本文將以vue專案為例，討論如何設計與實施我們的專案架構，來滿足版本的迭代 更新.元件 元件 乙個個的可復用單元，單頁面程式的元件跟傳統的ui元件稍有不同，不僅僅包含了樣式，也包含了容器元素。可以泛化元件，抽取出一些引數...
前端隨筆小結
1.如果想讓兩個div在一行的話，可以用display inline block inline或float left 2.clear屬性 指定段落的左側或右側不允許浮動的元素。取消浮動可以用clear both 3.外面是乙個div大框，作為父元素，裡面是不同小框div作為子元素 4.實現頁面居中，...