webpack+vue.js快速入門教程
前言
vuejs——輕量、學(xué)習(xí)成本低、雙向綁定、無(wú)dom的操作、組件的形式編寫
vuejs是個(gè)輕量級(jí)的mvvm框架， 集合了angular的基本功能，卻又比angular更為精簡(jiǎn)，功能上涵蓋了雙向綁定、指令、邏輯控制、過(guò)濾器、事件監(jiān)聽(tīng)、函數(shù)等?？蚣艿奶攸c(diǎn)使得項(xiàng)目 在狀態(tài)變更、分頁(yè)的場(chǎng)景下可以擁有很大的便利——所有的操作只需要變更數(shù)組，沒(méi)有任何的dom操作。
webpack——CommonJS的引用和編寫方式、loader非常的豐富，包括vue-loader、css-loader、less-loader
webpack是前端組件化的解決方案，webpack提供了核心的CommonJS引用方案去引用資源，下面這篇文章就給大家介紹webpack和vue.js，一起來(lái)看看吧。
項(xiàng)目的創(chuàng)建
1.新建項(xiàng)目文件夾，并在其中建立package.json
$ mkdir [project name] $ cd [project name] $ npm init
2.在項(xiàng)目目錄下新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue example</title>
</head>
<body>
<div>{{message}}</div>
<script src="dist/build.js"></script>
</body>
</html>
src文件夾，并在該文件夾下建立main.js
import Vue from 'vue'
new Vue({
el:'body',
data:{
message:'test success!'
}
});
設(shè)置webpack
1.安裝webpack，webpack-dev-server以及相關(guān)的loaders
# 全局安裝webpack，webpack-dev-server $ npm install -g webpack $ npm install -g webpack-dev-server # 為項(xiàng)目安裝其他依賴 $ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D
webpack-merge：開發(fā)環(huán)境和生產(chǎn)環(huán)節(jié)的webpaak配置文件的配置合并
css-loader：編譯寫入css
style-loader：把編譯后的css整合進(jìn)html
file-loader：編譯寫入文件，默認(rèn)情況下生成文件的文件名是文件名與MD5哈希值的組合
vue：vue主程序
vue-loader：編譯寫入.vue文件
vue-html-loader：編譯vue的template部分
vue-style-loader：編譯vue的樣式部分
vue-hot-reload-api：webpack對(duì)vue實(shí)現(xiàn)熱替換
babel-core：ES2015編譯核心
babel-loader：編譯寫入ES2015文檔
babel-preset-es2015：ES2015語(yǔ)法
babel-preset-stage-0：開啟測(cè)試功能
babel-runtime：babel執(zhí)行環(huán)境
url-loader
這里介紹下url-loader，這個(gè)loader實(shí)際上是對(duì)file-loader的封裝
比如CSS文件中有時(shí)候會(huì)這么寫：
.demo{
background-image: url('a.png');
}
module:{
loaders:[
{test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}
]
}
經(jīng)過(guò)以上配置，當(dāng)a.png小于8K就會(huì)自動(dòng)將圖片轉(zhuǎn)換成base64編碼，如果不小于，則不會(huì)轉(zhuǎn)換。
這里順便提一句，在module配置的時(shí)候，loader的寫法：
module:{
loaders:[
{test:/\.jade$/,loader:'jade'}
//這里配置了讓webpack識(shí)別jade的loader，其他類似，比如.vue
//用于css文件的loader有兩種寫法
{test:/\.css$/,loader:'style!css'}
{test:/\.css$/,loaders:['style','css']}
]
}
2.配置webpack.config.js
在根目錄下建立webpack.config.js，配置如下：
var path = require('path');
module.exports = {
entry: './src/main.js',
//定義webpack輸出的文件，我們?cè)谶@里設(shè)置了
讓打包后生成的文件放在dist文件夾下的build.js文件中
output: {
path: './dist',
publicPath:'dist/',
filename: 'build.js'
},
module: {
loaders: [
//轉(zhuǎn)化ES6語(yǔ)法
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
//圖片轉(zhuǎn)化，小于8K自動(dòng)轉(zhuǎn)化為base64的編碼
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
}
]
},
//這里用于安裝babel，如果在根目錄下的.babelrc配置了，這里就不寫了
babel: {
presets: ['es2015','stage-0'],
plugins: ['transform-runtime']
}
}
特別說(shuō)明
如果要在.babelrc下配置babel，則需要在根目錄下新建該文件，windows環(huán)境下，不能新建該txt文件然后改后綴，需要通過(guò)dos命令建立：
echo>.babelrc
通過(guò)該命令就可以建立babelde配置文件，用編輯器打開，修改里面的內(nèi)容為：
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
完成該配置我們?cè)诿钪羞\(yùn)行
$ webpack
打開index.html就可以看到瀏覽器中看到我們剛剛寫的文字
總結(jié)
至此我們實(shí)現(xiàn)了最基本的利用webpack打包vue，大家最好自己實(shí)際操作下代碼才能更好的理解，希望這篇文章對(duì)大家能有所幫助，如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
element-ui自定義message-box自定義樣式不生效的解決
這篇文章主要介紹了element-ui自定義message-box自定義樣式不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼
這篇文章主要介紹了vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue通信方式EventBus的實(shí)現(xiàn)代碼詳解
這篇文章主要介紹了vue通信方法EventBus的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
django+vue實(shí)現(xiàn)跨域的示例代碼
在我們的項(xiàng)目中需要用到django實(shí)現(xiàn)跨域的問(wèn)題，本文通過(guò)示例代碼給大家詳細(xì)介紹django+vue實(shí)現(xiàn)跨域的方法，感興趣的朋友跟隨小編一起看看吧2022-03-03
vue2.0的計(jì)算屬性computed和watch的區(qū)別及各自?使用場(chǎng)景解讀
這篇文章主要介紹了vue2.0的計(jì)算屬性computed和watch的區(qū)別及各自?使用場(chǎng)景，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue3使用defineModel實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要個(gè)給大家介紹了在vue3中使用defineModel進(jìn)行父子組件中的雙向綁定,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
Vue.js在設(shè)計(jì)上采用MVVM模式，當(dāng)View視圖層發(fā)生變化時(shí)，會(huì)自動(dòng)更新到ViewModel.接下來(lái)通過(guò)本文給大家分享Vue.js實(shí)現(xiàn)列表清單的操作方法，需要的朋友參考下吧2017-11-11
Vue+Express實(shí)現(xiàn)登錄狀態(tài)權(quán)限驗(yàn)證的示例代碼
這篇文章主要介紹了Vue+Express實(shí)現(xiàn)登錄狀態(tài)權(quán)限驗(yàn)證的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要介紹了vue實(shí)現(xiàn)彈幕功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
簡(jiǎn)單實(shí)現(xiàn)一個(gè)vue公式編輯器組件demo
這篇文章主要介紹了輕松實(shí)現(xiàn)一個(gè)簡(jiǎn)單的vue公式編輯器組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01