歸檔2cms前端開發(fā)講義vue js與webpack圖

1vue.js研究vue.js介1、vue.js是什么ue(讀音/vju?/，類似于i)是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，ue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。ue的庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，ue也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。漸進(jìn)式框架：Progressive，說(shuō)明vue.js的輕量，是指一個(gè)前端項(xiàng)目可以使用vue.js一兩個(gè)特性也可以整個(gè)項(xiàng)目vue.js 2、Vue.js與Vue不支持IE8及以下版本，因?yàn)閂ue使用了IE8無(wú)法模擬的ECMAScript5特性。3、Vue.js在html頁(yè)面使用script引入vue.js的庫(kù)即可使用 Vue-CLI腳手使用vue.js提供的CLI架很方便去創(chuàng)建vue.js工程雛形Vue.js的是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)式地將數(shù)據(jù)渲染進(jìn)DOM的系統(tǒng)比如：使用vue.js的插值表達(dá)式放在Dom的任意地方 差值表達(dá)式的值將被渲染在Dom中2）條件與 ue提供-mdl指令，它可以輕松實(shí)現(xiàn)m元素和數(shù)據(jù)對(duì)象之間雙向綁定，即修改DmDm元素中的值。處理用戶組件化應(yīng)用

指令添加一個(gè)器，通過(guò)它調(diào)用在Vue實(shí)例中定義vue.js可以定義一個(gè)一個(gè)的組件，在vue頁(yè)面中組件，這個(gè)功能非常適合構(gòu)建大型應(yīng)用vue.js基MVVM Model:負(fù)責(zé)業(yè)務(wù)邏輯處理（比如Ajax請(qǐng)求等），對(duì)數(shù)據(jù)進(jìn)行加工后交給視圖MVVM要解決的問(wèn)題是將業(yè)務(wù)邏輯代碼與視圖代碼進(jìn)行完全分離，使各自的職責(zé)更加清晰，后期代碼更加簡(jiǎn)單用圖解的形式分析Ajax請(qǐng)求回來(lái)數(shù)據(jù)后直接操作Dm來(lái)達(dá)到視圖的更新的缺點(diǎn)，以及使用MVVMVue中的從上圖看出，VM(ViewModel)可以把view視圖和Model模型解耦合，VM的要做的工作就是vue.js所承擔(dān)的本次測(cè)試我們?cè)陂T戶 中創(chuàng)建一個(gè)html頁(yè)面進(jìn)試，正式的頁(yè)面管理前端程序會(huì)單獨(dú)創(chuàng)建工程。在門戶 中創(chuàng)建etest ，并且在 下創(chuàng)建vue_01.tml文件<!DOCTYPE<!DOCTYPE<html<meta 程序<script<div在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當(dāng)于是MVVM中的View這個(gè)角色‐‐>//實(shí)例化Vue//vm叫做MVVM中的ViewModelvarVM=newVue({ 播客'//相當(dāng)于是MVVM中的Model}代碼編寫步1、定義html，引入2、定義appdiv，此區(qū)域作為vue的接管區(qū)域5、VM完成在app中展示實(shí)現(xiàn)效果代碼如下<!DOCTYPE<!DOCTYPE<htmllang="en"<meta 程序<div<av‐bind:href="url"><span<inputtype="text"<inputtype="text"<span<!‐‐<span<!‐‐<inputtype="text"<buttonv‐on:click="change">計(jì)算在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當(dāng)于是MVVM中的View這個(gè)角色‐‐><script//實(shí)例化Vue//vm叫做MVVM中的View本例子學(xué)習(xí)1、v-1、在表單控件或者組件上創(chuàng)建雙向綁 2、v-model僅能在如下元素中使用2、解決插值表達(dá)式閃爍問(wèn)題，使用v-4、v-<img<divv‐bind:style="{fontSize:size+'px'<img<div:style="{fontSize:size+'px'<!DOCTYPE<html<meta<title><script<div

<liv‐for="(item,index)inlist":key="index"v‐if="index%<liv‐for="(value,key)in<liv‐for="(item,index)inuserlist"<divv‐if="item.user.uname=='heima'"style="background:chartreuse"><!‐‐名稱為heima

<divnew{]}w使用vue.js開發(fā)大型應(yīng)用需要使用wck打包工具，本節(jié)研究wck的使用方法W 是一個(gè)前端資源的打包工具，它可以將js、image、css等資源當(dāng)成一個(gè)模塊進(jìn)行打包 ck可以將js、css、png等多種靜態(tài)資源進(jìn)行打包，使用w 程序員在開發(fā)時(shí)可以分模塊創(chuàng)建不同的js、css等小文件方便開發(fā)，最后使用w 2、編譯typescript、ES6等高級(jí)js語(yǔ)法隨著前端技術(shù)的強(qiáng)大，開發(fā)中可以使用javascript的很多高級(jí)版本，比如：typescript、ES6等，方便開發(fā) ck可以將打包文件轉(zhuǎn)換成瀏覽器可識(shí)別的js3、CSS預(yù)編 ck允許在開發(fā)中使用SassLess等原生CSS的擴(kuò)展技術(shù)，通過(guò)sass-loader、less-loader將SassLess的 2、文檔不安裝 安裝 ck基于node.js運(yùn)行，首先需要安裝node.js為什么會(huì)有傳統(tǒng)意義上的JavaScrit運(yùn)行在瀏覽器上，Chome使用的JavaScrit引擎是V8，Nd.s是一個(gè)運(yùn)行在服務(wù)端的框架，它的底層就使用了V8引擎，這樣就可以使用javscrit去編寫一些服務(wù)端的程序，這樣也就實(shí)現(xiàn)了用jvaScrit去開發(fā)Apache+PHP以及Javavet所開發(fā)的服務(wù)端功能，這樣做的好處就是前端和后端都采用javscrit，即開發(fā)一份js程序即可以運(yùn)行端也可以運(yùn)行的服務(wù)端，這樣比一個(gè)應(yīng)用使用多種語(yǔ)言在開發(fā)效率上要高，不過(guò)o.s屬于新興產(chǎn)品，一些公司也在嘗試使用d.s完成一些業(yè)務(wù)領(lǐng)域，o.s基于V8引擎，基于事件驅(qū)動(dòng)機(jī)制，在特定領(lǐng)域性能出色，比如用d.s實(shí)現(xiàn)消息推送、狀態(tài)等的業(yè)務(wù)功能非常合適。下邊我們?nèi)グ惭b1、對(duì)應(yīng)你系統(tǒng)的Node.js版本推薦LTS版本，本安裝9.4.0 安裝完成檢查PATH環(huán)境變量是否設(shè)置了node.js的路3、測(cè)在命令提示符下輸入命nodenode會(huì)顯示當(dāng)前node的版安裝1、自動(dòng)安裝npm全稱 Manager，他是node包管理和分發(fā)的工具，使用NPM可以對(duì)應(yīng)用的依賴進(jìn)行管理的功能和服務(wù)端項(xiàng)目構(gòu)建工具maven差不多，我們通過(guò) 可以很方便載js庫(kù)，打包js文件node.js已經(jīng)集成了npm工具，在命令提示符輸入npm-v可查看當(dāng)前npm版2、設(shè)置包包路徑就是npm從的js包所存放的路徑使用npmcon?gls查詢NPM管理包路徑（NPM的依賴包所存放的路徑NPM默認(rèn)的管理包路徑在C:/用戶/[用戶名]/AppData/Roming/npm/node_meodues了方便依賴管理我們將管理包的路徑設(shè)置在單獨(dú)的地方，本將安裝 設(shè)置在nd.s的 下，創(chuàng)建npm_moduls和pm_cache，執(zhí)行下邊令：本安裝node.js在 Files\nodejs下所以執(zhí)行命令如下npmcon?gsetcache"c:\ProgramFiles\nodejs\npm_cache"此時(shí)再使用npmcon?gls查詢NPM管理包路徑發(fā)現(xiàn)路徑已3、安裝npm默認(rèn)會(huì)去國(guó)外的鏡像去js包，在開發(fā)中通常我們使用國(guó)內(nèi)鏡像，這里我們使用淘寶鏡像安裝后，我們可以使用以下命令來(lái)查看cnpm的版cnpm-nrmls查看鏡像已經(jīng)指使nrmuseXXX切換如果nrm沒有安裝則需要進(jìn)行全局安裝：cnpminstall-g4、非連網(wǎng)環(huán)境安裝從本小節(jié)第3步開始就需要連網(wǎng)npm包，如果你的環(huán)境不能連網(wǎng)在老師的資料文件下有已經(jīng)好的w相關(guān)包，下邊是安裝方法1）配置環(huán)境變NODE_HOME=D:\ProgramFiles\nodejs(node.js安 可以使用npmcon?gls查看?？截愓n程資料中的npm_modules.zip到node.js安 ，并解壓npm_modules.zip覆蓋 下npm_modules文件夾cnpm-v1、連網(wǎng)安wck安裝分為本地安裝和全局安裝本地安裝：僅將wck安裝在當(dāng)前項(xiàng)目的 中，僅對(duì)當(dāng)前項(xiàng)目有效全局安裝：將wck安裝在本機(jī)，對(duì)所有項(xiàng)目有效，全局安裝會(huì)鎖定一個(gè)wck，版可能適用個(gè)項(xiàng)目。全局安裝需要添加-g參數(shù)。進(jìn)入wcktest測(cè) ，運(yùn)行1）本地安只在我的項(xiàng)目中使用wck，需要進(jìn)行本地安裝，因?yàn)轫?xiàng)目和項(xiàng)目所用的wck本一。本安裝會(huì)將wck的js包到項(xiàng)目下的npm_modeus 下。在門 下創(chuàng)建wck測(cè) wnpminstall--save-devwck或cnpminstall--save-devwcknpminstall--save-devwck-cli(4.0以后的版本需要安裝wck-cli)全局安裝就將 ck的js包到npm的包路徑下npminstall ck-g或cnpminstall ck-3）安裝wck指定的版本本使用wck3.6.0，安裝w進(jìn)入wcktest測(cè)試，運(yùn)行：cnpminstall--save-devwck@3.6.0全局安裝：npminstallwck@3.6.0-g或cnpminstallwck@3.6.0-g參考上邊“非連網(wǎng)環(huán)境安裝cnpm”描述，將課程資料中的npm_modules.zip到node.js安裝，并解npm_modules.zip覆蓋本下的npm_modules文件夾說(shuō)明：已執(zhí)行“非連網(wǎng)環(huán)境安裝cnpm”下的操作不用重復(fù)執(zhí)行。在cmd狀態(tài)輸入 ck，出現(xiàn)如下提示說(shuō) ck安裝成1.3.3程通過(guò)本程序體會(huì) ck打包的過(guò)程及模塊化開發(fā)的思想 創(chuàng)建w ，將vue.min.js及vue_02.html拷貝 下1、定義在w 下創(chuàng)建將本程序使用的加法運(yùn)算的js方法抽取到一個(gè)js文件，此文件就是一個(gè)////定義add函functionadd(x,{returnx+}//functionadd2(x,y) returnx+////導(dǎo)出add方module.exports.add=//module.exports={add,add2};////module.exports.add2=add2//2、定義在w 下創(chuàng)建main.js，main.js是本程序的js主文件，包括如下內(nèi)容var{add}=require('./model01.js');var{add}=require('./model01.js');varVue=require('./vue.min');varVM=new 程序員',//相當(dāng)于是MVVM中的Model this.result=add(Number.parseInt(this.num1),Number.parseInt(this.num2))}}上邊將mode01.js模塊及main.js主文件編寫完成，下邊使用wck對(duì)這些js文件進(jìn)行打 ，執(zhí)行wckmain.jsbuild.js，這段指令表示將main.js打包輸出為build.js文件 2、在html中<!DOCTYPE<!DOCTYPE<htmllang="en"<meta 程序<div<av‐bind:href="url"><span<inputtype="text"<inputtype="text"<span<!‐‐<inputtype="text"<buttonv‐on:click="change">計(jì)算在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當(dāng)于是MVVM中的View這個(gè)角色‐‐><script輸入任意加數(shù)，其和會(huì)自動(dòng)wck可以將js分模塊開發(fā)，開發(fā)完成對(duì)各模塊代碼打包成一個(gè)統(tǒng)一的文件。前端模塊開發(fā)的思想和服務(wù)端模塊開發(fā)的思想是一致的，有利于多人協(xié)助開發(fā)。wck-dev-server開發(fā)服務(wù)器，它的功能可以實(shí)現(xiàn)熱加 并且自動(dòng)刷新瀏覽器 ，這里我們創(chuàng)建wcktest02 ，將wck程序的代碼拷貝進(jìn)來(lái)，并在 將main.js和model01.js拷貝到 1、安裝wck-dev-使用wck-dev-server需要安裝wck、wck-dev-server和html-wck-plugin三個(gè)包。cnpminstallwck@3.6.0wck-dev-server@2.9.1html-wck-plugin@2.30.1--save-dev安裝完成，會(huì)發(fā)現(xiàn)程 出現(xiàn)一個(gè)package.json文件，此文件中記錄了程序的依賴沒有聯(lián)網(wǎng)的同學(xué)拷貝老師提供的node_modules.zip到 下，解壓到 下2、配置wck-dev-在package.json中配置"scripts":"scripts":"dev": ck‐dev‐server‐‐inline‐‐hot‐‐open‐‐port--inline：自動(dòng)刷--hot：熱加--port：指--open：自動(dòng)在默認(rèn)瀏覽器--host：可以指定服務(wù)器的ip，不指定則為，如果對(duì)外發(fā)布則填寫公網(wǎng)ip地址在wcktest02 下創(chuàng)建?g.js，wck.con?g.js是wck的配置文件。在此文件中可以配置應(yīng)用的文件、輸出配置、插件等，其中要實(shí)現(xiàn)熱加載自動(dòng)刷新功能需要配置nn的作用是根ml模板在內(nèi)存生成l文件，它的工作原理是根據(jù)模板文件在內(nèi)存中生成一文件。1、配置模板文_0l作為模板文件，為了和內(nèi)存中的mmst去掉，內(nèi)容如下：<!DOCTYPE<!DOCTYPE<htmllang="en"<meta 程序<div<av‐bind:href="url"><span<inputtype="text"<inputtype="text"<span<!‐‐<inputtype="text"<buttonv‐on:click="change">計(jì)算在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當(dāng)于是MVVM中的View這個(gè)角色‐‐>2、配置html-wck-在wck.con?g.js中配置html-wck-plugin插varvarhtmlwp= //指定打包 path:dirname+'/dist',//