簡介
在vue中實現組件化用到了vue特有的文件格式.vue，在每一個.vue文件就是一個組件，在組件中我們將html，css，js全部寫入，然后在webpack中配置vue-loader就可以了。
建立vue組件
在src目錄下建立components文件夾，并在其中建立app.vue文件，這樣我們項目的目錄結構如下：
|--dist //webpack打包后生成的文件夾| |--build.js|--node_modules //項目的依賴所在的文件夾|--src //文件入口| |--components //組件存放文件夾| |--app.vue //組件| |--main.js //主js文件|--index.html //主html文件|--package.json|--webpack.config.js //webpack配置文件
首先在index.hmtl中寫入代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue example</title></head><body> <app></app> <script src="dist/build.js"></script></body></html>
在編輯器中打開app.vue文件，寫入如下代碼：
<template><div class="message">{{msg}}</div> </template><script>export default { data () { return { msg: 'Hello from vue-loader' } }}</script><style>.message{ color:red; font-size:36px; font-weight:blod;}</style>在main.js中寫入：
import Vue from 'vue'import App from './components/app.vue'new Vue({ el: 'body', components:{App}});這樣運行命令webpack就可以看到效果了
這里用到了ES6的模塊兒—import，export
export命令
export命令用于規定模塊的對外接口。一個模塊就是一個獨立文件。該文件內的所有變量外部都無法獲取。如果希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字對外暴露出該變量。例如：
//export.jsexport var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;
這樣就可以對外輸出三個變量。
import命令
使用export對外暴露了接口后，其他js文件通過import命令加載這個模塊文件。上面暴露的三個變量在另一個js文件中引入如下：
//import.jsimport {firstName,lastName,year} from './export';function setName(element){ element.textContent = firstName + ' ' + lastName;}webpack的hot-reload
前端自動刷新現在已經很常見了，即改變頁面后，瀏覽器自動刷新，但是這個功能在我們做單頁面應用時候會很不好用，所以，webpack支持hot-reload(熱替換)，當我們修改模塊時候不會頁面不會刷新，會直接在頁面中生效。
hot-reload的基礎—webpack-dev-server
webpack-dev-server支持兩種模式的自動刷新頁面：
iframe模式（頁面嵌入一個iframe并在其中呈現頁面的變化）
inline模式（一個小型的webpack-dev-server客戶端會作為入口文件打包，這個客戶端會在后端代碼改變的時候刷新頁面）
iframe模式
使用iframe模式無需額外的配置，在dos下輸入命令
$ webpack-dev-server
在瀏覽器中輸入 http://loacalhost:8080/webpack-dev-server/index.html
inline模式
在dos下輸入命令
$ webpack-dev-server --inline --hot
啟動服務器，在瀏覽器中打開 http://loacalhost:8080 就可以看到我們的頁面，此時修改app.vue中的css，以及html中的文字，都可以看到在瀏覽器中立馬呈現。
關于webpack-dev-server的詳細說明，可以參考官方文檔或者博客WEBPACK DEV SERVER。
這里有一個問題需要說明下
在很多文章中都說，修改app.vue文件中script標簽中的msg文字，會在瀏覽器中立即呈現效果，但是事實上我在做demo的時候并沒有出現這個效果，Google了很多，找到了答案，尤大說：“data是初始值，但熱更新的時候會保留當前狀態”。
至此，關于webpack+vue的基本結束，雖然簡單，但是由于在這個過程中也遇到一些坑，所以總結下，關于對vue的研究，這才只是個開始…
附：
我的webpack配置文件：
var path = require('path');module.exports = { entry: './src/main.js', output: { path: './dist', publicPath:'dist/', filename: 'build.js' }, //配置自動刷新,如果打開會使瀏覽器刷新而不是熱替換 /*devServer: { historyApiFallback: true, hot: false, inline: true, grogress: true },*/ module: { loaders: [ //轉化ES6語法 { test: //.js$/, loader: 'babel', exclude: /node_modules/ }, //解析.vue文件 { test://.vue$/, loader:'vue' }, //圖片轉化，小于8K自動轉化為base64的編碼 { test: //.(png|jpg|gif)$/, loader:'url-loader?limit=8192' } ] }, vue:{ loaders:{ js:'babel' } }, resolve: { // require時省略的擴展名，如：require('app') 不需要app.js extensions: ['', '.js', '.vue'], // 別名，可以直接使用別名來代表設定的路徑以及其他 alias: { filter: path.join(__dirname, './src/filters'), components: path.join(__dirname, './src/components') } } }package.json文件：
{ "name": "webpackvue", "version": "1.0.0", "description": "", "main": "vue.js", "scripts": { "test": "echo /"Error: no test specified/" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.9.1", "babel-loader": "^6.2.4", "babel-plugin-transform-runtime": "^6.9.0", "babel-preset-es2015": "^6.9.0", "babel-preset-stage-0": "^6.5.0", "babel-runtime": "^6.9.2", "css-loader": "^0.23.1", "file-loader": "^0.8.5", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "vue":"^1.0.24", "vue-router":"^0.7.13", "vue-hot-reload-api": "^1.3.2", "vue-html-loader": "^1.2.2", "vue-loader": "^8.5.2", "vue-style-loader": "^1.0.0", "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1", "webpack-merge": "^0.13.0" }}總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
