問(wèn)題描述

最近在學(xué)習(xí)Vue的框架，Vue 是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。但初學(xué)者剛接觸框架的時(shí)候怎么創(chuàng)建Vue項(xiàng)目呢?

解決方案

Vue的腳手架是依賴(lài)于node.js，我們先要安裝node.js，但是node.js到底是什么呢?可以用一句話概括：node.js是可以讓JavaScript在服務(wù)器端運(yùn)行起來(lái)的環(huán)境，對(duì)于我們剛剛接觸的小白來(lái)說(shuō)，可能會(huì)有這樣的疑問(wèn)：Vue和node.js有什么關(guān)系?我使用Vue寫(xiě)前端頁(yè)面，難道一定需要安裝node.js嗎?我們也可以不使用node.js，但隨著學(xué)習(xí)的深入，會(huì)了解到使用腳手架快速搭建自己的前端項(xiàng)目，所以搭建vue環(huán)境必須得安裝node.js，總的來(lái)說(shuō);搭建vue項(xiàng)目需要node.js環(huán)境(npm包管理器)、vue-cli 腳手架構(gòu)建工具、cnpm npm的淘寶鏡像。

接下來(lái)就是展示項(xiàng)目搭建的過(guò)程：

從node.js官網(wǎng)下載并安裝node，安裝過(guò)程很簡(jiǎn)單，一路“下一步”就可以了(傻瓜式安裝)。安裝完成之后，打開(kāi)命令行工具，輸入 node -v，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。

npm包管理器，是集成在node中的，所以，直接輸入 npm -v就會(huì)如下圖所示，顯示出npm的版本信息。node環(huán)境已經(jīng)安裝完成，npm包管理器也有了。由于某些資源被屏蔽的原因經(jīng)常會(huì)導(dǎo)致用npm安裝依賴(lài)包的時(shí)候失敗，所以還需要npm的國(guó)內(nèi)鏡像---cnpm。在命令行中輸入npm install -g cnpm–registry=https://registry.npm.taobao.org安裝完成如下圖。

完成之后，我們就可以用cnpm代替npm來(lái)安裝依賴(lài)包了。在命令行中運(yùn)行命令 cnpm install -g vue-cli，然后等待安裝完成。在命令行中運(yùn)行命令 vue initwebpack firstVue 。解釋一下這個(gè)命令，這個(gè)命令的意思是初始化一個(gè)項(xiàng)目，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的。其中firstVue是整個(gè)項(xiàng)目文件夾的名稱(chēng)，這個(gè)文件夾會(huì)自動(dòng)生成在你指定的目錄中(我的實(shí)例中，會(huì)在桌面生成該文件夾)，如下圖。

安裝完成之后，會(huì)在我們的項(xiàng)目目錄文件夾中多出一個(gè)node_modules文件夾，這里邊就是我們項(xiàng)目需要的依賴(lài)包，基本上項(xiàng)目搭建就完成了。如果還需要了解更深的vue的搭建還需要進(jìn)一步探索學(xué)習(xí)。