vue + webpack 起手式 | webpack vue
2016-10-04更新為使用Vue.js2.x前端的世界變化之快速,從2010開始小弟經歷了jQuery,Backbone,Angular,到React。這一路走來雖然學習到了許多高明開發者融合於框架或函式庫中的智慧,卻也因為不斷快速變化感到疲憊。時至2016小弟認為在實務與理想之間取得一個完美平衡的前端框架大概就屬vue.js了。當然這前端世界裡並沒有萬能藥可以完美的處理所有問題,不過vue.js的精美,不只容易與傳統MVC框架(Rails,ASP.NETMVC)等結合,當要使用最新的設計模式如Flux,redux等也都是沒問題的,再加上易學與一些你肯定能感受到作者從實戰淬煉出來的特...
2016-10-04 更新為使用 Vue.js 2.x
前端的世界變化之快速,從 2010 開始小弟經歷了 jQuery, Backbone, Angular, 到 React。這一路走來雖然學習到了許多高明開發者融合於框架或函式庫中的智慧,卻也因為不斷快速變化感到疲憊。時至 2016 小弟認為在實務與理想之間取得一個完美平衡的前端框架大概就屬 vue.js 了。
當然這前端世界裡並沒有萬能藥可以完美的處理所有問題,不過 vue.js 的精美,不只容易與傳統 MVC 框架(Rails, ASP.NET MVC)等結合,當要使用最新的設計模式如 Flux, redux 等也都是沒問題的,再加上易學與一些你肯定能感受到作者從實戰淬煉出來的特性。因此在 2016 我也決定轉戰 vue.js。
隨著 Javascript 社群快速的演進,很可怕一個問題是 - 專案的環境設定,關於那些 tooling 這不只是 React 的問題,當你想使用 ES2015 的新語法,方便的持續整合與測試,匯入匯出模組時,我們就需要設定這些專案工具。
雖然 vue 本身有提供指令介面 vue-cli 讓我們快速建立專案,但對這些相關技術和設定有些瞭解肯定能幫助你執行更多客製的行為。
從頭自己一點一點設定有一些好處:
每個專案都有不同的需求,您可以根據自身的需求來設定
我們也提到 Javascript(nodejs) 的世界變得很快,如果有局部的套件壞了那我們也比較清楚該怎麼處理
直接使用別人的 start-kit 也許會多裝了一堆你不需要的東西
這篇文章將會透過實作介紹最基本的概念,使用 webpack 設定一個基本的 vue 專案
Part 1 基本目錄架構 1. 建立專案與 package.json $ mkdir [project_name] $ cd [project_name] $ npm init -y $ npm install vue -S我們先把需要的程式與目錄結構準備好,需求是使用 Vue + ES2015 來開發。第一步在根目錄建立一個 index.html 下面是一個簡單的 vue 範例
<!DOCTYPE ...