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

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

指令添加一個器，通過它調(diào)用在Vue實例中定義vue.js可以定義一個一個的組件，在vue頁面中組件，這個功能非常適合構(gòu)建大型應用vue.js基MVVM Model:負責業(yè)務(wù)邏輯處理（比如Ajax請求等），對數(shù)據(jù)進行加工后交給視圖MVVM要解決的問題是將業(yè)務(wù)邏輯代碼與視圖代碼進行完全分離，使各自的職責更加清晰，后期代碼更加簡單用圖解的形式分析Ajax請求回來數(shù)據(jù)后直接操作Dm來達到視圖的更新的缺點，以及使用MVVMVue中的從上圖看出，VM(ViewModel)可以把view視圖和Model模型解耦合，VM的要做的工作就是vue.js所承擔的本次測試我們在門戶 中創(chuàng)建一個html頁面進試，正式的頁面管理前端程序會單獨創(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ù)這些指令就相當于是MVVM中的View這個角色‐‐>//實例化Vue//vm叫做MVVM中的ViewModelvarVM=newVue({ 播客'//相當于是MVVM中的Model}代碼編寫步1、定義html，引入2、定義appdiv，此區(qū)域作為vue的接管區(qū)域5、VM完成在app中展示實現(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">計算在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當于是MVVM中的View這個角色‐‐><script//實例化Vue//vm叫做MVVM中的View本例子學習1、v-1、在表單控件或者組件上創(chuàng)建雙向綁 2、v-model僅能在如下元素中使用2、解決插值表達式閃爍問題，使用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ā)大型應用需要使用wck打包工具，本節(jié)研究wck的使用方法W 是一個前端資源的打包工具，它可以將js、image、css等資源當成一個模塊進行打包 ck可以將js、css、png等多種靜態(tài)資源進行打包，使用w 程序員在開發(fā)時可以分模塊創(chuàng)建不同的js、css等小文件方便開發(fā)，最后使用w 2、編譯typescript、ES6等高級js語法隨著前端技術(shù)的強大，開發(fā)中可以使用javascript的很多高級版本，比如：typescript、ES6等，方便開發(fā) ck可以將打包文件轉(zhuǎn)換成瀏覽器可識別的js3、CSS預編 ck允許在開發(fā)中使用SassLess等原生CSS的擴展技術(shù)，通過sass-loader、less-loader將SassLess的 2、文檔不安裝 安裝 ck基于node.js運行，首先需要安裝node.js為什么會有傳統(tǒng)意義上的JavaScrit運行在瀏覽器上，Chome使用的JavaScrit引擎是V8，Nd.s是一個運行在服務(wù)端的框架，它的底層就使用了V8引擎，這樣就可以使用javscrit去編寫一些服務(wù)端的程序，這樣也就實現(xiàn)了用jvaScrit去開發(fā)Apache+PHP以及Javavet所開發(fā)的服務(wù)端功能，這樣做的好處就是前端和后端都采用javscrit，即開發(fā)一份js程序即可以運行端也可以運行的服務(wù)端，這樣比一個應用使用多種語言在開發(fā)效率上要高，不過o.s屬于新興產(chǎn)品，一些公司也在嘗試使用d.s完成一些業(yè)務(wù)領(lǐng)域，o.s基于V8引擎，基于事件驅(qū)動機制，在特定領(lǐng)域性能出色，比如用d.s實現(xiàn)消息推送、狀態(tài)等的業(yè)務(wù)功能非常合適。下邊我們?nèi)グ惭b1、對應你系統(tǒng)的Node.js版本推薦LTS版本，本安裝9.4.0 安裝完成檢查PATH環(huán)境變量是否設(shè)置了node.js的路3、測在命令提示符下輸入命nodenode會顯示當前node的版安裝1、自動安裝npm全稱 Manager，他是node包管理和分發(fā)的工具，使用NPM可以對應用的依賴進行管理的功能和服務(wù)端項目構(gòu)建工具maven差不多，我們通過 可以很方便載js庫，打包js文件node.js已經(jīng)集成了npm工具，在命令提示符輸入npm-v可查看當前npm版2、設(shè)置包包路徑就是npm從的js包所存放的路徑使用npmcon?gls查詢NPM管理包路徑（NPM的依賴包所存放的路徑NPM默認的管理包路徑在C:/用戶/[用戶名]/AppData/Roming/npm/node_meodues了方便依賴管理我們將管理包的路徑設(shè)置在單獨的地方，本將安裝 設(shè)置在nd.s的 下，創(chuàng)建npm_moduls和pm_cache，執(zhí)行下邊令：本安裝node.js在 Files\nodejs下所以執(zhí)行命令如下npmcon?gsetcache"c:\ProgramFiles\nodejs\npm_cache"此時再使用npmcon?gls查詢NPM管理包路徑發(fā)現(xiàn)路徑已3、安裝npm默認會去國外的鏡像去js包，在開發(fā)中通常我們使用國內(nèi)鏡像，這里我們使用淘寶鏡像安裝后，我們可以使用以下命令來查看cnpm的版cnpm-nrmls查看鏡像已經(jīng)指使nrmuseXXX切換如果nrm沒有安裝則需要進行全局安裝：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安裝在當前項目的 中，僅對當前項目有效全局安裝：將wck安裝在本機，對所有項目有效，全局安裝會鎖定一個wck，版可能適用個項目。全局安裝需要添加-g參數(shù)。進入wcktest測 ，運行1）本地安只在我的項目中使用wck，需要進行本地安裝，因為項目和項目所用的wck本一。本安裝會將wck的js包到項目下的npm_modeus 下。在門 下創(chuàng)建wck測 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進入wcktest測試，運行：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文件夾說明：已執(zhí)行“非連網(wǎng)環(huán)境安裝cnpm”下的操作不用重復執(zhí)行。在cmd狀態(tài)輸入 ck，出現(xiàn)如下提示說 ck安裝成1.3.3程通過本程序體會 ck打包的過程及模塊化開發(fā)的思想 創(chuàng)建w ，將vue.min.js及vue_02.html拷貝 下1、定義在w 下創(chuàng)建將本程序使用的加法運算的js方法抽取到一個js文件，此文件就是一個////定義add函functionadd(x,{returnx+}//functionadd2(x,y) returnx+////導出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 程序員',//相當于是MVVM中的Model this.result=add(Number.parseInt(this.num1),Number.parseInt(this.num2))}}上邊將mode01.js模塊及main.js主文件編寫完成，下邊使用wck對這些js文件進行打 ，執(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">計算在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當于是MVVM中的View這個角色‐‐><script輸入任意加數(shù)，其和會自動wck可以將js分模塊開發(fā)，開發(fā)完成對各模塊代碼打包成一個統(tǒng)一的文件。前端模塊開發(fā)的思想和服務(wù)端模塊開發(fā)的思想是一致的，有利于多人協(xié)助開發(fā)。wck-dev-server開發(fā)服務(wù)器，它的功能可以實現(xiàn)熱加 并且自動刷新瀏覽器 ，這里我們創(chuàng)建wcktest02 ，將wck程序的代碼拷貝進來，并在 將main.js和model01.js拷貝到 1、安裝wck-dev-使用wck-dev-server需要安裝wck、wck-dev-server和html-wck-plugin三個包。cnpminstallwck@3.6.0wck-dev-server@2.9.1html-wck-plugin@2.30.1--save-dev安裝完成，會發(fā)現(xiàn)程 出現(xiàn)一個package.json文件，此文件中記錄了程序的依賴沒有聯(lián)網(wǎng)的同學拷貝老師提供的node_modules.zip到 下，解壓到 下2、配置wck-dev-在package.json中配置"scripts":"scripts":"dev": ck‐dev‐server‐‐inline‐‐hot‐‐open‐‐port--inline：自動刷--hot：熱加--port：指--open：自動在默認瀏覽器--host：可以指定服務(wù)器的ip，不指定則為，如果對外發(fā)布則填寫公網(wǎng)ip地址在wcktest02 下創(chuàng)建?g.js，wck.con?g.js是wck的配置文件。在此文件中可以配置應用的文件、輸出配置、插件等，其中要實現(xiàn)熱加載自動刷新功能需要配置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">計算在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當于是MVVM中的View這個角色‐‐>2、配置html-wck-在wck.con?g.js中配置html-wck-plugin插varvarhtmlwp= //指定打包 path:dirname+'/dist',//