高效的開(kāi)發(fā)離不開(kāi)基礎(chǔ)工程的搭建。本章主要介紹如何使用Vue進(jìn)行實(shí)際SPA項(xiàng)目的開(kāi)發(fā)，這里使用的是目前熱門(mén)的JavaScript應(yīng)用程序模塊打包工具Webpack，進(jìn)行模塊化開(kāi)發(fā)、代碼編譯和打包。
Vue-cli
Vue腳手架指的是Vue-cli，它是一個(gè)專(zhuān)門(mén)為單頁(yè)面應(yīng)用快速搭建繁雜程序的腳手架，它可以輕松地創(chuàng)建新的應(yīng)用程序而且可用于自動(dòng)生成Vue和Webpack的項(xiàng)目模板。
Vue-cli是一個(gè)基于Vue.js進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)，其提供以下功能：
（1）通過(guò)@vue/cli實(shí)現(xiàn)交互式的項(xiàng)目腳手架。
（2）通過(guò)@vue/cli+@vue/cli-service-global實(shí)現(xiàn)零配置原型開(kāi)發(fā)。
（3）一個(gè)運(yùn)行時(shí)的依賴(lài)（@vue/cli-service），該依賴(lài)：
· 可升級(jí)。
· 基于Webpack構(gòu)建，并帶有合理的默認(rèn)配置。
· 可以通過(guò)項(xiàng)目?jī)?nèi)的配置文件進(jìn)行配置。
· 可以通過(guò)插件進(jìn)行擴(kuò)展。
（4）一個(gè)豐富的官方插件集合，集成了前端生態(tài)中最好的工具。
（5）一套完全圖形化的創(chuàng)建和管理Vue.js項(xiàng)目的用戶界面。
Vue-cli致力于將Vue生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接，這樣開(kāi)發(fā)者可以專(zhuān)注在撰寫(xiě)應(yīng)用上，而不必花費(fèi)好幾天時(shí)間去糾結(jié)配置的問(wèn)題。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性，而無(wú)須eject。
利用Vue-cli腳手架構(gòu)建Vue項(xiàng)目需要先安裝Node.js和NPM環(huán)境。
Node.js
1．什么是Node.js
Node.js是一個(gè)基于Chrome V8引擎的JavaScript運(yùn)行環(huán)境。Node.js使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式I/O的模型。
Node是一個(gè)讓JavaScript運(yùn)行在服務(wù)端的開(kāi)發(fā)平臺(tái)，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務(wù)端語(yǔ)言平起平坐的腳本語(yǔ)言。Node發(fā)布于2009年5月，由Ryan Dahl開(kāi)發(fā)，實(shí)質(zhì)是對(duì)Chrome V8引擎進(jìn)行了封裝。
Node對(duì)一些特殊用例進(jìn)行優(yōu)化，提供替代的API，使得V8在非瀏覽器環(huán)境下運(yùn)行得更好。V8引擎執(zhí)行JavaScript的速度非?？?，性能非常好。Node是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的平臺(tái)，用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。Node使用事件驅(qū)動(dòng)，采用非阻塞I/O模型而得以輕量和高效，非常適合在分布式設(shè)備上運(yùn)行數(shù)據(jù)密集型的實(shí)時(shí)應(yīng)用。
2．Node.js的安裝
Node.js的安裝比較簡(jiǎn)單，大家需要在Node.js官網(wǎng)（https://nodejs.org/en/download/）下載并安裝Node.js環(huán)境，Windows系統(tǒng)推薦下載Windows Installer（.msi）。同時(shí)，大家會(huì)得到一個(gè)附送的NPM工具。
（1）安裝Node.js，雙擊下載好的node安裝文件
安裝過(guò)程比較簡(jiǎn)單，一直單擊“下一步”按鈕即可。
（2）環(huán)境變量配置。安裝完成后需要設(shè)置環(huán)境變量，即在Path中添加安裝目錄（例如：D：\java\nodejs），如圖
（3）單擊“開(kāi)始”按鈕，然后單擊“運(yùn)行”按鈕，在輸入框內(nèi)輸入cmd命令，最后輸入node-v，如圖文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-475912.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-475912.html
到了這里，關(guān)于前端工程化-VUE的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
