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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

Vue.js環境搭建、安裝Vue-cli腳?架、Visualstudiocode?錄本章簡介?前典型的前端三?框架：Angular.js、React.js、Vue.js。其中，Vue.js框架更容易上?，靈活度更?，在企業級開發中受到前端開發?員的青睞，所以本書的?覓項?采?的vue.js框架完成。任務1?覓項?業務場景1.1?覓項?業務分析?覓項?的業務類型屬于票務銷售，?先分析?下?覓項?的業務，如下圖：1.2?覓項?技術棧選型本項?選擇的核?技術是前端組件化框架Vue.js,因此確定了Vue.js+Webpack這套技術棧，也是?前最?的技術棧之?。?覓項?的技術棧選型分析如下：安裝Node環境安裝淘寶鏡像CNPM安裝Vue-cli腳?架，初始化vue項?安裝配置iView框架頁?路由選擇使?vue-router插件完成Vue項?中使?VueX進?數據共享管理選擇使?ECMAScript6語法編寫JavaScript選擇Vue官?推薦的axios插件發送異步請求?覓項?為前后端完全分離的項?，需要的后臺數據通過Mock數據進?模擬任務2?覓項?環境搭建?覓項?的環境搭建依賴于Node.js的環境，所以接下來介紹Node.js的安裝以及NPM包管理?具的安裝、配置等。2.1Node.js的介紹Node.js是?個基于ChormeV8引擎的JavaScript運?環境。Node.js使?了?個事件驅動、?阻塞式I/O的模型，既輕便??效。Node.js安裝：根據電腦的不同系統位數進?下載對應安裝包，?直“下?步”就可以了。檢驗Node.js是否安裝成功：**1.**Win+R調出運?窗?，輸?cmd回車：2.在命令提?符窗???輸?node-v，查看你安裝node.js的版本：2.2什么是NPMNPM是Node.js的包管理器，是全球最?的開源庫?態系統，它集成在Node.js中，所以在安裝Node.js的時候就已經?帶NPM包管理器，?需我們??單獨安裝。檢驗NPM是否安裝成功：在命令提?符窗???輸?npm-v，查看你安裝npm的版本：NPM安裝成功后，全局安裝express框架，在命令提?符窗?輸?：npminstallexpress-g2.3安裝CNPM2.4安裝Vue-cli腳?架Vue-cli是?個官?命令??具，可?于快速搭建?型單頁?應?。使?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創建項?dm在命令提?符窗?輸?：vueinitwebpackdm命令交互含義：Projectname：項?名稱，可以直接回車Projectdescription：項?的描述內容，可以?定義Author：項?的作者，可以寫上??的郵箱Vuebuild：打包的?式，這?可以直接回車Installvue-router（Y/n)？：是否安裝Vue路由，建議選YUseESLinttolintyourcode（Y/n)？：是否啟?ESlint檢測，建議選nSetupunittests（Y/n)？：是否需要單元檢測，建議選nSetupe2etestswithNightwatch（Y/n)：是否需要端對端的檢測，建議選n2.7啟動項?dm1.?先進?項??錄中，在命令提?符窗?輸?：cddm2.項?依賴模塊：在命令?窗?輸?：cnpminstall3.最后啟動項?，在命令?窗?輸?：npmrundev2.8安裝開發?具VisualStudioCode根據電腦的不同系統位數進?下載對應安裝包，?直“下?步”就可以了。上?我們已經使?npm安裝了項?dm，我們在VisualStudioCode中打開該?錄，結構如下：?錄解析：任務3前端架構設計3.1分層架構&模塊化?覓項?采?的MVVM分層架構設計，把功能相似、抽象級別相近的實現進?分層，使邏輯變得清晰，容易理解和維護。分層架構的主要優勢在于：易維護、可擴展、易復?、靈活性?，因此深受前端?程師喜愛。**模塊化：**是在使?分層架構的同時需要使?的?種重要技術，是指解決?個復雜問題時?頂向下逐層把系統劃分成若?模塊的過程。模塊化?來分割、組織和打包軟件，每?個模塊完成?個特定的?功能，所有的模塊按照某種?法組裝起來，成為?個整體，完成整個系統的功能。主要的模塊化解決?案有：AMD（requirejs）、CMD（seajs）、CommonJS、ES6，?覓項?使?的是ES6進?代碼開發，?覓項?架構設計如下圖：3.2分離?式分離?式的種類主要分為三種：不分離、部分分離、完全分離。不分離：前后端共??個項??錄，本地開發環境搭建成本?，項??較復雜、不宜維護且維護成本?、發布風險?，不利于問題的定位和修改。部分分離：本地開發環境搭建成本?，需要后端提供頁?模板，更新和修改模板需要后端?員操作，效率低且不易維護，發布?式需要同時發布，且溝通成本?較?。完全分離（分布式）：完全分離?分為兩種，分離開發集成部署和分離開發分離部署，?覓項?采?的第?種：分離開發分離部署。前端使?純HTML通過接?的?式進?數據的交互，降低系統的復雜度，部署時單獨部署到?臺服務器上，使?代理進?數據的交互。3.3UI框架**UI框架的優點：**快速搭建Web頁?、集中精?完成業務代碼、縮短開發周期。**UI框架的缺點：**冗余代碼、?法定制化、精細化開發。通過對搭配Vue使?的UI框架的篩選，我們?覓項?采?的UI框架是iView。iView框架是?套基于Vue.js的開源UI組件庫，主要服務于PC界?的中后臺產品。iView框架特性：?質量、功能豐富友好的API，?由靈活地使?空間細致、漂亮的UI事?巨細的?檔可?定義主題iView框架的安裝與引?：（1）安裝：打開命令提?符窗?，進?項??錄dm，執?安裝命令：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內部標簽全部刪除，替換為iView框架的button組件：<divclass="hello"><Buttontype="success">Sucess</Button></div>3.4構建?具webpackWebpack可以將多種靜態資源js、css、less轉換成?個靜態的?件，減少頁?的請求，同時也減少轉義less或ES6語法等?作，??地提?了開發效率。(1）新建?個?件夾webpack，使?VisualStudioCode打開，在命令?窗?輸?初始化命令：npminit，創建?個package.json。(2)在webpack?件夾下創建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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論