webpack+vue.js構建前端工程化的詳細教程
本篇主要介紹三塊知識點： node.js ,vue.js,webpack前端工程化 ，希望對您能有所幫助。
本文來自于csdn,由火龍果軟件Alice編輯推薦。
node.js基本入門
node.js介紹
node.js可以讓javascript程序在后端運行起來。我們之前所熟知的javascript都是運行在前端瀏覽器，我們編寫好了javascript代碼后，由瀏覽器解釋執(zhí)行。而node.js，可以讓我們編寫javascript，然后在后端運行起來?，F在的javascript和java、python一樣，可以操作I/O、操作數據庫、或者其他各類操作系統資源。
上面這張圖，和下面的這張圖很像?？梢哉J為，node.js是javascript的一種跨平臺運行在主機的實現。
環(huán)境搭建
下載node.js （運行環(huán)境）
https://nodejs.org/en/
下載Visual Studio Code（開發(fā)環(huán)境）
https://code.visualstudio.com/
npm介紹
寫過Java的同學應該都知道，我們要編寫程序往往都需要導入很多其他額外的JAR包（官方的JavaSE包默認提供了）。早期在Maven出現之前，我們都是需要手動去下載各種框架的JAR包。自從有了Maven之后，我們不再需要手動下載了，直接在一個POM.XML文件中引入需要的依賴即可。在node中，運行一個node程序也會依賴于其他的一些模塊。當然node也會自帶一些基本模塊。那當我們需要使用這些模塊的時候，我們需要從網絡上下載。這個去網上下載非常麻煩。node官方提供了一個管理工具npm，這個工具可以根據需要自動從服務器下載各種包。這就省去了，我們自己去網上下載包的過程。
npm淘寶鏡像
官方的npm在國內速度是比較慢的，可以使用淘寶的鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成后，就可以使用cnpm從淘寶鏡像來下載、安裝node包
使用cnpm安裝包
cnpm install <包的名稱>
包的名稱可以去https://npm.taobao.org/上搜索
node.js模塊化程序結構
每一個js文件就是一個模塊（json等其實也可以作為一個模塊），對應的就是一個module對象。下面這一段程序，表示從外部引入一個模塊，然后執(zhí)行模塊中的函數。
var fs = require("fs"); // 引入fs模塊
var data = fs.readFileSync('input.txt'); // 調用fs模塊中的readFileSync方法
console.log(data.toString());
第一行的, required表示引入一個包，返回的就是module對象。這個fs包，是node自帶的包，引入一個包后就可以調用這個包下的方法。但是包中的方法不是都可以被調用的，只有類似：
exports.world = function() {
console.log('Hello World');
}
這樣的代碼，才能被調用。更簡單來說，在包中定義的函數都是對外不可見的，要想被外部調用，需要使用exports來定義函數。
這個require函數有點類似于C語言中的#include。它首先會從文件cache緩存中查找傳入的模塊名，如果沒有找到再查找原生模塊，最后查找文件中加載。
node.js重要模塊(API)介紹
node.js全局對象
node.js原生模塊
實現一個用戶管理模塊
創(chuàng)建項目
建立一個空的文件夾用于保存該項目
進入命令提示符，使用npm init初始化項目，結束后會自動生成一個package.json文件，這個文件中包含了項目的所有依賴包，可以把這個package.json文件理解為項目文件
創(chuàng)建客戶Service模塊
/**
* 客戶Service
*/
exports.CustomerService = function() {
this.customers = [];
// 添加客戶
this.add = function(cstm) {
this.customers.push(cstm);
}
// 根據客戶名字移除
this.remove = function(name) {
for(var i = 0; i < this.customers.length; ++i) {
if(this.customers[i].name === name) {
this.customers.splice(i, 1);
break;
}
}
}
// 獲取所有客戶
this.findAll = function() {
return this.customers;
}
}
創(chuàng)建入口模塊index.js
var customerService = require('./customerService');
var cm = new customerService.CustomerService();
cm.add({name: '小喬', age: 20, sex: '女'});
cm.add({name: '二喬', age: 21, sex: '女'});
cm.add({name: '大喬', age: 22, sex: '女'});
// 查詢所有客戶
var cstms = cm.findAll();
console.log("---");
console.log(cstms);
// 刪除客戶
cm.remove("小喬");
console.log("---");
console.log(cm.findAll())
執(zhí)行node index.js
PS H:\code\nodejs\02> node .\index.js
---
[ { name: '小喬', age: 20, sex: '女' },
{ name: '二喬', age: 21, sex: '女' },
{ name: '大喬', age: 22, sex: '女' } ]
---
[ { name: '二喬', age: 21, sex: '女' },
{ name: '大喬', age: 22, sex: '女' } ]
vue.js基本入門
介紹
Vue是一套前端框架。它實現了前端頁面視圖（HTML/CSS）和模型數據的分離，而且它提供了快速簡單構建組件的方式。讓我們以一種全新的方式來開發(fā)前端。
基本編程模型（模板 + 模型）
使用Vue指令定義模板
<div id="app">
<span>
{{name}}
</span>
</div>
使用Vue定義數據模型
var app2 = new Vue({
el: '#app',
data: { // 定義模型數據
name: 'Hello, Tom!'
},
method: { // 定義綁定數據方法
sayHello: function() {
alert('hello!');
}
}
})
常用指令介紹
組件化開發(fā)
在前端開發(fā)中引入組件化是一個大的進步。其實，如果我們用過一些UI框架就會知道，大多數的UI框架都定義了很多的組件，例如：button按鈕、datagrid表格組件、tree樹形組件、dialog對話框組件等等。但是，之前我們都是使用別人給我們開發(fā)好的框架。我們今天要學習如何使用Vue來開發(fā)一個自己的組件。將來，我們可以自己開發(fā)一套自己的組件庫，然后使用這些組件庫來構建我們的前端應用程序。
組件結構
可以把組件理解為就是一個小的頁面視圖。使用Vue開發(fā)的組件也分為兩個部分：
視圖模板
屬性（模型數據）
視圖模板依舊是使用HTML/CSS+Vue指令，但是模型數據現在跟之前不太一樣，模型數據應該是使用組件的時候，動態(tài)傳入進來的。所以，模型數據需要先定義出來。
實現一個購物車程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>購物車</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css" rel="external nofollow" >
</head>
<body>
<div id="app" class="container">
<h1>購物車</h1>
<hr>
<btn-grp :buttons="buttons"></btn-grp>
<btn-grp :buttons="buttons_test"></btn-grp>
<btn-grp :buttons="buttons"></btn-grp>
<btn-grp :buttons="buttons_test"></btn-grp>
<br>
<br>
<table class="table table-bordered table-striped table-hover">
<tr>
<th>ID</th>
<th>商品名稱</th>
<th>商品價格</th>
<th>商品數量</th>
<th>商品總價</th>
</tr>
<tr v-for="(prod, index) in products">
<td>{{index+1}}</td>
<td>{{prod.name}}</td>
<td>{{prod.price}}</td>
<td>
<button @click="changeCount(prod, -1)">-</button>
<input type="text" v-model="prod.count">
<button @click="changeCount(prod, 1)">+</button>
</td>
<td>{{prod.price * prod.count}}</td>
</tr>
<tr>
<td colspan="4" class="text-right">總價:</td>
<td class="text-primary">{{getTotalMoney()}}</td>
</tr>
</table>
</div>
<script src="./vue.js"></script>
<script>
// 自定義組件，這里實現了一個按鈕組組件
Vue.component('btn-grp', {
props: ['buttons'],
template:
'<div class="btn-group" role="group">'
+ '<button type="button" @click="btn.handler" v-for="btn in buttons" :class="\'btn \' + (btn.class == null || btn.class == \'\' ? \'btn-default\':btn.class)">'
+ '{{btn.title}}'
+ '</button>'
+ '</div>'
});
var app = new Vue({
el: '#app',
data: {
// 按鈕組件測試
buttons_test: [
{title: '測試1', class: 'btn-danger'},{title: '測試2'},{title: '測試3'},{title: '測試4'},
],
buttons: [{
title: '添加',
class: 'btn-primary',
handler: function() {
alert('點擊添加按鈕');
}
}, {
title: '修改',
class: 'btn-default',
handler: function() {
alert('點擊修改按鈕');
}
}, {
title: '刪除',
class: 'btn-default',
handler: function() {
alert('點擊刪除按鈕');
}
}, ],
products: [
{
name: '小米6S',
price: 3999,
count: 1,
},
{
name: '錘子2',
price: 4999,
count: 1,
},
{
name: '華為P20',
price: 3599,
count: 1,
},
{
name: 'OPPO R15',
price: 2999,
count: 1,
},
{
name: 'OPPO R11',
price: 1999,
count: 1,
},
],
},
methods: {
// 用戶點擊加減數量時調用
changeCount: function(prod, num) {
if(num < 0) {
if(prod.count > 0) {
prod.count += num;
}
}
else {
prod.count += num;
}
},
// 獲取總金額
getTotalMoney: function() {
var totalMoney = 0.0;
for(var i = 0; i < this.products.length; ++i) {
totalMoney += parseFloat(this.products[i].price * this.products[i].count);
}
return totalMoney;
}
}
});
</script>
</body>
</html>
效果圖
使用webpack構建前端工程化
webpack介紹
webpack是一個前端項目構建工具。使用webpack可以把前端當成一個工程來開發(fā)。而且能夠很好地把前端的各類資源統一管理、編譯、打包。
它是一個“編譯器”，可以通過各種插件將基于node.js、sass、less編寫代碼編譯成能夠運行在前端瀏覽器的javascript、和css
它是一個打包工具，可以將所有前端的資源打包到一個bundle.js中
有了webpack，我們可以像開發(fā)后端應用一樣開發(fā)前端。
總體結構圖
webpack是基于node.js開發(fā)的一款應用，其實webpack就是一個node.js的模塊。
安裝webpack
創(chuàng)建一個空的文件夾
使用npm init創(chuàng)建package.json
安裝cnpm淘寶鏡像
使用cnpm install vue-cli -g全局安裝vue-cli模塊
使用vue init webpack cart創(chuàng)建基于webpack購物車項目
使用cnpm install bootstrap --save安裝bootstrap模塊
具體步驟請參考：https://www.webpackjs.com/guides/installation/
使用webpack重構購物車程序
使用vue-cli生成項目腳手架如下圖：
將原來編寫的btn-grp組件單獨編寫到BtnGrp.vue文件中
可以看到現在代碼清晰了很多，template標簽部分編寫模板，script標簽部分編寫組件的交互代碼，編寫方式和原先寫在HTML的代碼一致
現在整個前端應用都是基于組件化的，代碼變得更加清晰了
<template>
<div class="btn-group" role="group">
<button :key="btn.title"
type="button" @click="btn.handler"
v-for="btn in buttons"
:class="'btn ' + (btn.class == null || btn.class == '' ? 'btn-outline-secondary':btn.class)">
{{btn.title}}
</button>
</div>
</template>
<script>
export default {
props: ['buttons']
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
將原來寫在HTML中的代碼重構到App.vue中
此處因為需要用到BtnGrp組件，所以需要先import 組件，然后在components中引用該組件
<template>
<div id="app" class="container">
<h1>WEBPACK + VUE 實現購物車</h1>
<BtnGrp :buttons="buttons"></BtnGrp>
<br/>
<br/>
<table class="table table-bordered table-striped table-hover">
<tr>
<th>ID</th>
<th>商品名稱</th>
<th>商品價格</th>
<th>商品數量</th>
<th>商品總價</th>
</tr>
<tr :key="index+1" v-for="(prod, index) in products">
<td>{{index+1}}</td>
<td>{{prod.name}}</td>
<td>{{prod.price}}</td>
<td>
<button class="btn btn-outline-info btn-sm" @click="changeCount(prod, -1)">-</button>
<input style="width:50px" type="text" v-model="prod.count">
button class="btn btn-outline-info btn-sm" @click="changeCount(prod, 1)">+</button>
</td>
<td>{{prod.price * prod.count}}</td>
</tr>
<tr>
<td colspan="4" class="text-right">總價:</td>
<td class="text-primary">{{getTotalMoney()}}</td>
</tr>
</table>
</div>
</template>
<script>
/* eslint-disable no-new */
import 'bootstrap/dist/css/bootstrap.min.css'
import BtnGrp from './components/BtnGrp'
export default {
name: 'App',
components: {BtnGrp},
data () {
return {
products: [
{
name: '小米6S',
price: 3999,
count: 1,
},
{
name: '錘子2',
price: 4999,
count: 1,
},
{
name: '華為P20',
price: 3599,
count: 1,
},
{
name: 'OPPO R15',
price: 2999,
count: 1,
},
{
name: 'OPPO R11',
price: 1999,
count: 1,
},
],
buttons: [{
title: '添加',
class: 'btn-outline-primary',
handler: function() {
alert('點擊添加按鈕');
}
}, {
title: '修改',
class: 'btn-outline-primary',
handler: function() {
alert('點擊修改按鈕');
}
}, {
title: '刪除',
class: 'btn-outline-danger',
handler: function() {
alert('點擊刪除按鈕');
}
}, ],
changeCount: function(prod, num) {
if(num < 0) {
if(prod.count > 0) {
prod.count += num;
}
}
else {
prod.count += num;
}
},
getTotalMoney: function() {
var totalMoney = 0.0;
for(var i = 0; i < this.products.length; ++i) {
totalMoney += parseFloat(this.products[i].price * this.products[i].count);
}
?
return totalMoney;
}
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
因為npm安裝的bootstrap是bootstrap4，所以稍微對原先的樣式調整了下。最終的效果圖如下：
總結
到此這篇關于webpack+vue.js構建前端工程化的文章就介紹到這了,更多相關webpack vuejs 前端工程化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue的路由動畫切換頁面無法讀取meta值的bug記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue如何實現未登錄不能訪問某些頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了詳解vue跨組件通信的幾種方法 ，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue是一個單頁面的應用,這導致一些爬蟲和百度無法搜索到,如果你想針對你應用的其中某些頁面進行SEO優(yōu)化,讓他們可以被爬蟲和百度搜索到,你可以進行預渲染操作,下面這篇文章主要給大家介紹了關于Vue單頁面應用做預渲染的相關資料,需要的朋友可以參考下2021-10-10
Vue使用Echarts實現橫向柱狀圖,并通過WebSocket即時通訊更新
這篇文章主要介紹了Vue使用Echarts實現橫向柱狀圖,并通過WebSocket即時通訊更新方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue-resource三種請求格式和萬能測試地址,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
vue-router 源碼之實現一個簡單的 vue-router
這篇文章主要介紹了vue-router 源碼之實現一個簡單的 vue-router，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本文給大家介紹了vue項目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建），具體內容詳情大家跟隨腳本之家小編一起學習吧2018-06-06
這篇文章主要為大家介紹了axios攔截器工作原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了vue elementUI 表單校驗的實現代碼（多層嵌套），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11