Vue.js環(huán)境搭建、安裝Vue-cli腳手架、Visualstudiocode_第1頁
Vue.js環(huán)境搭建、安裝Vue-cli腳手架、Visualstudiocode_第2頁
Vue.js環(huán)境搭建、安裝Vue-cli腳手架、Visualstudiocode_第3頁
Vue.js環(huán)境搭建、安裝Vue-cli腳手架、Visualstudiocode_第4頁
Vue.js環(huán)境搭建、安裝Vue-cli腳手架、Visualstudiocode_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

Vue.js環(huán)境搭建、安裝Vue-cli腳?架、Visualstudiocode?錄本章簡介?前典型的前端三?框架：Angular.js、React.js、Vue.js。其中，Vue.js框架更容易上?，靈活度更?，在企業(yè)級開發(fā)中受到前端開發(fā)?員的青睞，所以本書的?覓項?采?的vue.js框架完成。任務(wù)1?覓項?業(yè)務(wù)場景1.1?覓項?業(yè)務(wù)分析?覓項?的業(yè)務(wù)類型屬于票務(wù)銷售，?先分析?下?覓項?的業(yè)務(wù)，如下圖：1.2?覓項?技術(shù)棧選型本項?選擇的核?技術(shù)是前端組件化框架Vue.js,因此確定了Vue.js+Webpack這套技術(shù)棧，也是?前最?的技術(shù)棧之?。?覓項?的技術(shù)棧選型分析如下：安裝Node環(huán)境安裝淘寶鏡像CNPM安裝Vue-cli腳?架，初始化vue項?安裝配置iView框架頁?路由選擇使?vue-router插件完成Vue項?中使?VueX進?數(shù)據(jù)共享管理選擇使?ECMAScript6語法編寫JavaScript選擇Vue官?推薦的axios插件發(fā)送異步請求?覓項?為前后端完全分離的項?，需要的后臺數(shù)據(jù)通過Mock數(shù)據(jù)進?模擬任務(wù)2?覓項?環(huán)境搭建?覓項?的環(huán)境搭建依賴于Node.js的環(huán)境，所以接下來介紹Node.js的安裝以及NPM包管理?具的安裝、配置等。2.1Node.js的介紹Node.js是?個基于ChormeV8引擎的JavaScript運?環(huán)境。Node.js使?了?個事件驅(qū)動、?阻塞式I/O的模型，既輕便??效。Node.js安裝：根據(jù)電腦的不同系統(tǒng)位數(shù)進?下載對應(yīng)安裝包，?直“下?步”就可以了。檢驗Node.js是否安裝成功：**1.**Win+R調(diào)出運?窗?，輸?cmd回車：2.在命令提?符窗???輸?node-v，查看你安裝node.js的版本：2.2什么是NPMNPM是Node.js的包管理器，是全球最?的開源庫?態(tài)系統(tǒng)，它集成在Node.js中，所以在安裝Node.js的時候就已經(jīng)?帶NPM包管理器，?需我們??單獨安裝。檢驗NPM是否安裝成功：在命令提?符窗???輸?npm-v，查看你安裝npm的版本：NPM安裝成功后，全局安裝express框架，在命令提?符窗?輸?：npminstallexpress-g2.3安裝CNPM2.4安裝Vue-cli腳?架Vue-cli是?個官?命令??具，可?于快速搭建?型單頁?應(yīng)?。使?CNPM全局安裝Vue-cli：在命令提?符窗?輸?：cnpminstallvue-cli-g檢驗Vue-cli是否安裝成功：在命令提?符窗???輸?：vue-V，查看你安裝的Vue-cli的版本號：2.5安裝Webpack使?CNPM全局安裝webpack：由于webpack4.0以上版本容易報錯，我們安裝3.5.5版本的進?配置，在命令?窗?中輸?：npminstallwebpack@3.5.5-g2.6創(chuàng)建項?dm在命令提?符窗?輸?：vueinitwebpackdm命令交互含義：Projectname：項?名稱，可以直接回車Projectdescription：項?的描述內(nèi)容，可以?定義Author：項?的作者，可以寫上??的郵箱Vuebuild：打包的?式，這?可以直接回車Installvue-router（Y/n)？：是否安裝Vue路由，建議選YUseESLinttolintyourcode（Y/n)？：是否啟?ESlint檢測，建議選nSetupunittests（Y/n)？：是否需要單元檢測，建議選nSetupe2etestswithNightwatch（Y/n)：是否需要端對端的檢測，建議選n2.7啟動項?dm1.?先進?項??錄中，在命令提?符窗?輸?：cddm2.項?依賴模塊：在命令?窗?輸?：cnpminstall3.最后啟動項?，在命令?窗?輸?：npmrundev2.8安裝開發(fā)?具VisualStudioCode根據(jù)電腦的不同系統(tǒng)位數(shù)進?下載對應(yīng)安裝包，?直“下?步”就可以了。上?我們已經(jīng)使?npm安裝了項?dm，我們在VisualStudioCode中打開該?錄，結(jié)構(gòu)如下：?錄解析：任務(wù)3前端架構(gòu)設(shè)計3.1分層架構(gòu)&模塊化?覓項?采?的MVVM分層架構(gòu)設(shè)計，把功能相似、抽象級別相近的實現(xiàn)進?分層，使邏輯變得清晰，容易理解和維護。分層架構(gòu)的主要優(yōu)勢在于：易維護、可擴展、易復(fù)?、靈活性?，因此深受前端?程師喜愛。**模塊化：**是在使?分層架構(gòu)的同時需要使?的?種重要技術(shù)，是指解決?個復(fù)雜問題時?頂向下逐層把系統(tǒng)劃分成若?模塊的過程。模塊化?來分割、組織和打包軟件，每?個模塊完成?個特定的?功能，所有的模塊按照某種?法組裝起來，成為?個整體，完成整個系統(tǒng)的功能。主要的模塊化解決?案有：AMD（requirejs）、CMD（seajs）、CommonJS、ES6，?覓項?使?的是ES6進?代碼開發(fā)，?覓項?架構(gòu)設(shè)計如下圖：3.2分離?式分離?式的種類主要分為三種：不分離、部分分離、完全分離。不分離：前后端共??個項??錄，本地開發(fā)環(huán)境搭建成本?，項??較復(fù)雜、不宜維護且維護成本?、發(fā)布風險?，不利于問題的定位和修改。部分分離：本地開發(fā)環(huán)境搭建成本?，需要后端提供頁?模板，更新和修改模板需要后端?員操作，效率低且不易維護，發(fā)布?式需要同時發(fā)布，且溝通成本?較?。完全分離（分布式）：完全分離?分為兩種，分離開發(fā)集成部署和分離開發(fā)分離部署，?覓項?采?的第?種：分離開發(fā)分離部署。前端使?純HTML通過接?的?式進?數(shù)據(jù)的交互，降低系統(tǒng)的復(fù)雜度，部署時單獨部署到?臺服務(wù)器上，使?代理進?數(shù)據(jù)的交互。3.3UI框架**UI框架的優(yōu)點：**快速搭建Web頁?、集中精?完成業(yè)務(wù)代碼、縮短開發(fā)周期。**UI框架的缺點：**冗余代碼、?法定制化、精細化開發(fā)。通過對搭配Vue使?的UI框架的篩選，我們?覓項?采?的UI框架是iView。iView框架是?套基于Vue.js的開源UI組件庫，主要服務(wù)于PC界?的中后臺產(chǎn)品。iView框架特性：?質(zhì)量、功能豐富友好的API，?由靈活地使?空間細致、漂亮的UI事?巨細的?檔可?定義主題iView框架的安裝與引?：（1）安裝：打開命令提?符窗?，進?項??錄dm，執(zhí)?安裝命令：cnpminstalliview--save（2）引?：在Webpack的??頁?main.js中做如下配置：importiViewfrom'iview';//引?iView框架import'iview/dist/styles/iview.css';//引?iView框架樣式VUe.use(iView);//使?iView框架上機測試iView框架是否引?成功：在srccomponents?件夾下打開HelloWorld.vue?件，將class名為hello的div內(nèi)部標簽全部刪除，替換為iView框架的button組件：<divclass="hello"><Buttontype="success">Sucess</Button></div>3.4構(gòu)建?具webpackWebpack可以將多種靜態(tài)資源js、css、less轉(zhuǎn)換成?個靜態(tài)的?件，減少頁?的請求，同時也減少轉(zhuǎn)義less或ES6語法等?作，??地提?了開發(fā)效率。(1）新建?個?件夾webpack，使?VisualStudioCode打開，在命令?窗?輸?初始化命令：npminit，創(chuàng)建?個package.json。(2)在webpack?件夾下創(chuàng)建src?件夾，在此?件夾下新建?個index.js?件，在index.js?件中添加以下代碼：document.write(“HelloWorld！”)(3)在webpack?件夾下新建?個index.html?件，代碼如下：<html><head><metacharset="utf-8"><body><scripttype="text/javascript"src="build.js"charset="utf-8"></script>

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論