webpack+vue.js實(shí)現(xiàn)組件化詳解
簡(jiǎn)介
在vue中實(shí)現(xiàn)組件化用到了vue特有的文件格式.vue,在每一個(gè).vue文件就是一個(gè)組件,在組件中我們將html,css,js全部寫(xiě)入,然后在webpack中配置vue-loader就可以了。
建立vue組件
在src目錄下建立components文件夾,并在其中建立app.vue文件,這樣我們項(xiàng)目的目錄結(jié)構(gòu)如下:
|--dist //webpack打包后生成的文件夾 | |--build.js |--node_modules //項(xiàng)目的依賴(lài)所在的文件夾 |--src //文件入口 | |--components //組件存放文件夾 | |--app.vue //組件 | |--main.js //主js文件 |--index.html //主html文件 |--package.json |--webpack.config.js //webpack配置文件
首先在index.hmtl中寫(xiě)入代碼:
<!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>
在編輯器中打開(kāi)app.vue文件,寫(xiě)入如下代碼:
<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中寫(xiě)入:
import Vue from 'vue' import App from './components/app.vue' new Vue({ el: 'body', components:{App} });
這樣運(yùn)行命令webpack就可以看到效果了
這里用到了ES6的模塊兒—import
,export
export
命令
export命令用于規(guī)定模塊的對(duì)外接口。一個(gè)模塊就是一個(gè)獨(dú)立文件。該文件內(nèi)的所有變量外部都無(wú)法獲取。如果希望外部能夠讀取模塊內(nèi)部的某個(gè)變量,就必須使用export關(guān)鍵字對(duì)外暴露出該變量。例如:
//export.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958;
這樣就可以對(duì)外輸出三個(gè)變量。
import
命令
使用export
對(duì)外暴露了接口后,其他js文件通過(guò)import
命令加載這個(gè)模塊文件。上面暴露的三個(gè)變量在另一個(gè)js文件中引入如下:
//import.js import {firstName,lastName,year} from './export'; function setName(element){ element.textContent = firstName + ' ' + lastName; }
webpack的hot-reload
前端自動(dòng)刷新現(xiàn)在已經(jīng)很常見(jiàn)了,即改變頁(yè)面后,瀏覽器自動(dòng)刷新,但是這個(gè)功能在我們做單頁(yè)面應(yīng)用時(shí)候會(huì)很不好用,所以,webpack支持hot-reload(熱替換),當(dāng)我們修改模塊時(shí)候不會(huì)頁(yè)面不會(huì)刷新,會(huì)直接在頁(yè)面中生效。
hot-reload的基礎(chǔ)—webpack-dev-server
webpack-dev-server支持兩種模式的自動(dòng)刷新頁(yè)面:
iframe模式(頁(yè)面嵌入一個(gè)iframe并在其中呈現(xiàn)頁(yè)面的變化)
inline模式(一個(gè)小型的webpack-dev-server客戶(hù)端會(huì)作為入口文件打包,這個(gè)客戶(hù)端會(huì)在后端代碼改變的時(shí)候刷新頁(yè)面)
iframe模式
使用iframe模式無(wú)需額外的配置,在dos下輸入命令
$ webpack-dev-server
在瀏覽器中輸入 http://loacalhost:8080/webpack-dev-server/index.html
inline模式
在dos下輸入命令
$ webpack-dev-server --inline --hot
啟動(dòng)服務(wù)器,在瀏覽器中打開(kāi) http://loacalhost:8080
就可以看到我們的頁(yè)面,此時(shí)修改app.vue中的css,以及html中的文字,都可以看到在瀏覽器中立馬呈現(xiàn)。
關(guān)于webpack-dev-server的詳細(xì)說(shuō)明,可以參考官方文檔或者博客WEBPACK DEV SERVER。
這里有一個(gè)問(wèn)題需要說(shuō)明下
在很多文章中都說(shuō),修改app.vue文件中script標(biāo)簽中的msg文字,會(huì)在瀏覽器中立即呈現(xiàn)效果,但是事實(shí)上我在做demo的時(shí)候并沒(méi)有出現(xiàn)這個(gè)效果,Google了很多,找到了答案,尤大說(shuō):“data是初始值,但熱更新的時(shí)候會(huì)保留當(dāng)前狀態(tài)”。
至此,關(guān)于webpack+vue的基本結(jié)束,雖然簡(jiǎn)單,但是由于在這個(gè)過(guò)程中也遇到一些坑,所以總結(jié)下,關(guān)于對(duì)vue的研究,這才只是個(gè)開(kāi)始…
附:
我的webpack配置文件:
var path = require('path'); module.exports = { entry: './src/main.js', output: { path: './dist', publicPath:'dist/', filename: 'build.js' }, //配置自動(dòng)刷新,如果打開(kāi)會(huì)使瀏覽器刷新而不是熱替換 /*devServer: { historyApiFallback: true, hot: false, inline: true, grogress: true },*/ module: { loaders: [ //轉(zhuǎn)化ES6語(yǔ)法 { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, //解析.vue文件 { test:/\.vue$/, loader:'vue' }, //圖片轉(zhuǎn)化,小于8K自動(dòng)轉(zhuǎn)化為base64的編碼 { test: /\.(png|jpg|gif)$/, loader:'url-loader?limit=8192' } ] }, vue:{ loaders:{ js:'babel' } }, resolve: { // require時(shí)省略的擴(kuò)展名,如:require('app') 不需要app.js extensions: ['', '.js', '.vue'], // 別名,可以直接使用別名來(lái)代表設(shè)定的路徑以及其他 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" } }
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
Vue tagsview實(shí)現(xiàn)多頁(yè)簽導(dǎo)航功能流程詳解
基本上后臺(tái)管理系統(tǒng)都需要有多頁(yè)簽的功能,但是因?yàn)橐恍┠_手架項(xiàng)目基本都把這個(gè)功能給集成好了,導(dǎo)致在學(xué)習(xí)或者修改的時(shí)候不知道該如何下手。今天這篇文章就來(lái)聊一聊,vue-element-admin項(xiàng)目是如何實(shí)現(xiàn)多頁(yè)簽功能的2022-09-09vue 詳情跳轉(zhuǎn)至列表頁(yè)實(shí)現(xiàn)列表頁(yè)緩存
這篇文章主要介紹了vue 詳情跳轉(zhuǎn)至列表頁(yè)實(shí)現(xiàn)列表頁(yè)緩存,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03vue.js模版插值的原理與實(shí)現(xiàn)方法簡(jiǎn)析
這篇文章主要介紹了vue.js模版插值的原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了vue.js模板插值的基本功能、原理、實(shí)現(xiàn)方法與注意事項(xiàng),需要的朋友可以參考下2023-04-04vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06簡(jiǎn)單談?wù)剉ue的過(guò)渡動(dòng)畫(huà)(推薦)
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)剉ue的過(guò)渡動(dòng)畫(huà)(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10vue3實(shí)現(xiàn)父組件提交校驗(yàn)多個(gè)子組件
這篇文章主要為大家詳細(xì)介紹了vue3如何實(shí)現(xiàn)父組件在提交事件中校驗(yàn)多個(gè)子組件中的form件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-11-11electron + vue項(xiàng)目實(shí)現(xiàn)打印小票功能及實(shí)現(xiàn)代碼
這篇文章主要介紹了electron + vue項(xiàng)目實(shí)現(xiàn)打印小票功能,需要的朋友可以參考下2018-11-11