Vue.js + Webpack

vue.js

Vue.js是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件

以上是Vue.js官方定義，故名思議，以數據驅動視圖是Vue.js推崇的開發模式，與jQuery手工操做DOM元素以更新視圖不一樣，Vue.js提倡儘可能減小DOM操做。所以，Vue.js是一個專一於視圖的開發框架，也就是MVVM中的VM，下面一個簡單的例子解釋了一個完整的MVVM模型：

 渲染結果爲：

基於這樣一種MVVM開發模式，在配合vue的組件開發、數據綁定，在後續的app開發中會有極大的威力。

webpack

webpack是當前十分熱門的模塊加載器，它能把各類資源，如JS、css/less/sass、圖片等都作爲模塊來使用和處理。在大型應用的開發過程當中，將應用分割成一個個小模塊，分工合做，而後再將小模塊經過webpack進行整合，達到了「庖丁解牛」的效果，用一張圖來講明webpack在做用，就是：

npm

這幾年無論是在github仍是在各類社區上，都能看到npm的身影，npm是一個模塊管理工具，它運行在命令行下，用來安裝和管理node模塊。

前面說到將開發的靜態資源分紅一個個模塊，在咱們使用該模塊時，採用npm install便可安裝相應的模塊，這個在後面的具體例子會有具體的操做和應用。

vue + webpack

如今經過vue做者提供的vue-loader-example 來一步步瞭解vue在webpack下的組件模塊開發，同時利用npm來安裝咱們須要的模塊包。

項目目錄結構以下：

各個文件已經作了相應的註釋，如下重點講解幾個主要文件的內容和做用。

package.json：

npm安裝依賴的json文件，每一個由npm管理模塊的項目下都會有這個 package.json文件，這個文件在項目初始化時可經過npm init:

如上圖示範，在初次初始化時，按照提示分別輸入package.json字段，包括：項目名字(name)、項目版本(version)、項目描述(description)和依賴(dependencies)等，有些選項並不是必填，具體參數填寫方式參考npm文檔。

在進行npm init初始化後，就會在當前目錄下生成package.json文件，這裏將vue-loader-example的完整package.json內容展現以下:

{

"name": "vue-webpack-vueloader",

"version": "0.0.1",

"description": "Example using webpack with vue-loader",

"main": "index.js",

"scripts": { "dev": "webpack-dev-server --inline --hot --config build/webpack.dev.config.js", "build": "webpack --progress --hide-modules --config build/webpack.prod.config.js", "test": "karma start build/karma.conf.js" },

"author": "lijiahao",

"license": "ISC",

"dependencies": { "vue": "^1.0.16" },

"devDependencies": { "babel-core": "^6.1.2", "babel-loader": "^6.1.0", "babel-plugin-transform-runtime": "^6.1.2", "babel-preset-es2015": "^6.1.2", "babel-preset-stage-0": "^6.1.2", "babel-runtime": "^5.8.0", "css-loader": "^0.23.0", "eslint": "^1.10.3", "eslint-loader": "^1.3.0", "file-loader": "^0.8.4", "function-bind": "^1.0.2", "inject-loader": "^2.0.1", "jade": "^1.11.0", "jasmine-core": "^2.4.1", "karma": "^0.13.15", "karma-jasmine": "^0.3.6", "karma-phantomjs-launcher": "^0.2.1", "karma-spec-reporter": "0.0.23", "karma-webpack": "^1.7.0", "phantomjs": "^1.9.19", "stylus-loader": "^1.4.0", "template-html-loader": "0.0.3", "url-loader": "^0.5.7", "vue-hot-reload-api": "^1.2.0", "vue-html-loader": "^1.0.0", "vue-loader": "^8.0.0", "vue-style-loader": "^1.0.0", "webpack": "^1.12.2", "webpack-dev-server": "^1.12.0" }

 }

注：一、dependencies鍵值內的內容，在運行npm install xxx後能夠自動插入相應的值，如須要安裝vue，運行npm install vue,npm就會自動安裝最新版本的vue到當前node_modules文件夾中，dependencies的內容也會變成以下：

"dependencies": {

"vue": "^1.0.16"

}

二、devDependencies鍵值內的內容是指開發過程當中須要用到的依賴包，包括ES6轉ES5加載器、CSS加載器等等，這部分的內容可經過npm install xxx --save-dev進行安裝，如須要安裝webpack,輸入npm install webpack --save-dev,在devDependencies下就會寫入webpack的具體安裝信息。

在有了這個完整的package.json文件的狀況下，使用命令：npm install，npm就會在當前目錄下載項目所需依賴，下載的文件存放在node_modules中，這一過程由npm自動完成，咱們只需等待便可。

經過npm安裝了項目所需的依賴，包括：vue、vue-loader、webpack、babel等，這裏將再下一篇博客對關鍵依賴進行介紹，以瞭解webpack的模塊打包機制.

原文地址：http://geocld.github.io/2016/03/14/vuejs_webpack/