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