webpack2.X、Vue學習以及將兩者相結合

02-12

webpack+vue初探二在家的閑暇時間來完善自己的前端知識。

經過兩三天的學習，按照webpack文檔學習，vue文檔學習，最後實現了兩者結合的目標。

webpack

按照網站上guide的流程依次學習

使用npm安裝webpack
設置輸入文件，比如怎樣引入css，images，fonts，data
設置輸出文件，比如可以根據自己的設置來決定輸出腳本的名稱，生成新的頁面，在每次生成新頁面之前先把舊的頁面進行清理
開發過程中，使用source maps來顯示提示信息，方便開發者定位錯誤的信息，使用本地伺服器訪問頁面。
對於輸出的文件進行壓縮，減小文件的大小

Vue

使用npm進行安裝vue
在webpack的入口文件中使用

import Vue from vue;

引入vue，這樣會報錯，錯誤顯示引入的是vue.runtime.esm.js，當我們在webpack中使用：

module.exports = { // ... resolve: { alias: { vue$: vue/dist/vue.esm.js // vue/dist/vue.common.js for webpack 1 } }}

就可以解決報錯；

3.最後引入

module.exports = { // ... plugins: [ // ... new webpack.DefinePlugin({ process.env: { NODE_ENV: JSON.stringify(production) } }) ]}

代碼展示：

目錄結構：

index.html

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>vue page</title> <div class="" id="main"> <div class="" id="head"> </div> <div class="" id="container"> {{message}} </div> <div class="" id="foot"> </div> </div> </head> <body> <script type="text/javascript" src="app.bundle.js"></script></body></html>

webpack.config.js

app.js

import _ from lodash;import Vue from vue;var app = new Vue({ el: #container, data: { message: Hello Vue! }})

最後，可以看到一個經典的hello world顯示在頁面上。

到此時我認為最簡單的webpack和vue已經結合，可以正常的進行前端的開發了，ok，我先開始使用一下自己的勞動成果，使用vue開發一下通用的組件，啦啦啦~~~~~~

2018.1.27更新

大家可以移步webpack+vue初探二，這一篇我的理解出問題了，謹當是給自己的警鐘吧！