簡介
在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.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958;
這樣就可以對外輸出三個變量。
import命令
使用export對外暴露了接口後，其他js文件通過import命令加載這個模塊文件。上面暴露的三個變量在另一個js文件中引入如下：
//import.js
import {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"
}
}
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。