Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架。他自身不是一個(gè)全能框架——只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。在與相關(guān)工具和支持庫(kù)一起使用時(shí)，Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁(yè)應(yīng)用。

　　在配置環(huán)境之前呢，有些基礎(chǔ)的東西還是要和大家普及一下的.如果你已經(jīng)對(duì)Vue.js有所了解，那請(qǐng)點(diǎn)擊 配置步驟 跳轉(zhuǎn)到配置環(huán)境的閱讀，否則，請(qǐng)耐心看完看完。

      首先，介紹一下Vue.js的概念，他是干啥的呢？一定要配置vue的運(yùn)行環(huán)境嗎？

　  如上述Vue.js不是個(gè)全能的框架，因?yàn)樗淖饔弥痪劢乖谝晥D層?？梢岳斫鉃樗且粋€(gè)庫(kù)，是一個(gè)提供盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。Vue.js　　可以直接在html里引用，也就是說(shuō)直接引入他的js文檔（如下圖），就可以在HTML文件中添加vue.js指令了。

　　那既然如此簡(jiǎn)單就可以完事，我們所謂的運(yùn)行環(huán)境配置又是怎么回事呢？是這樣的，使用npm引入是方便 包管理 。如果是初學(xué)者，職位練習(xí)vue的使用，那您大可不必配　　置環(huán)境，因?yàn)橹灰獙?dǎo)入js就足夠了。但是，如果是以后要用到vue做項(xiàng)目的話，配置環(huán)境是必須的。當(dāng)項(xiàng)目與后臺(tái)鏈接在一起時(shí)，需要導(dǎo)入的文件會(huì)很多，你總不能用到啥就導(dǎo)　　入啥吧！這是就要用到 Node.js前端自動(dòng)化的概念了。簡(jiǎn)單的說(shuō)就是，把你用到的東西打包導(dǎo)入，我們只需要了解如何使用，其他的讓系統(tǒng)來(lái)做，讓前端開(kāi)發(fā)更爽。

<script type="text/javascript" src="js/vue.js" ></script>

其次，介紹一下Node.js的概念，他又是干啥的？為啥要安裝他？

　　Node.js是一個(gè)Javascript運(yùn)行環(huán)境。實(shí)際上它是對(duì)Chrome V8引擎進(jìn)行了封裝。Node 是一個(gè)服務(wù)器端 JavaScript 解釋器，他會(huì)改變服務(wù)器應(yīng)該如何工作的概念。它的目標(biāo)是幫助程序員構(gòu)建高度可伸縮的應(yīng)用程序，編寫(xiě)能夠處理數(shù)萬(wàn)條同時(shí)連接到一個(gè)物理機(jī)的連接代碼。那直白的說(shuō)，Node.js就是服務(wù)器程序，是用來(lái)做后端的技術(shù)，不能直接用于前端開(kāi)發(fā)。但是干前端的學(xué)會(huì)了會(huì)更好，對(duì)編程的思想和代碼效率有很大的提升。Node大量使用時(shí)間驅(qū)動(dòng)實(shí)現(xiàn)異步開(kāi)發(fā)，能夠高效的打通前后端，所以vue也是采用他作為配置環(huán)境，便于大型項(xiàng)目的開(kāi)發(fā)。

那么作為新手如何來(lái)搭建 Vue.js 的運(yùn)行環(huán)境呢，請(qǐng)跟著我的流程走。

Vue.js的運(yùn)行環(huán)境配置，主要分為3步：

1.安裝Node.js（JavaScript運(yùn)行環(huán)境）
2.安裝Vue.js
3.搭建Vue-cli 創(chuàng)建項(xiàng)目

那現(xiàn)在開(kāi)始正式安裝。

(1)首先，下載 Node.js，請(qǐng)點(diǎn)擊 下載Node ，根據(jù)你需要的配置下載即可，一般我們windows系統(tǒng)下載 Windows Installer (.msi) 64位的就好。下載完畢后，會(huì)有這樣的一個(gè)圖標(biāo)點(diǎn)擊安裝，然后沒(méi)有什么要特別注意的，直接下一步就可以，但是要知道你安裝的路徑，養(yǎng)成良好的習(xí)慣。

安裝完以后，打開(kāi)命令行（Windows+R）快捷鍵打開(kāi)cmd窗口，輸入 node -v ，如果出現(xiàn)版本號(hào)，那就安裝成功！

(2)接下來(lái)，安裝vue.js。因?yàn)?NPM 服務(wù)器在國(guó)外，安裝速度慢，所以都使用淘寶的鏡像。注意，此步驟需要網(wǎng)絡(luò)，請(qǐng)保持保持網(wǎng)絡(luò)通暢。

打開(kāi)cmd命令框，輸入
npm install -g cnpm –registry=https://registry.npm.taobao.org 　

注意，安裝鏡像的時(shí)候會(huì)有大約1-2分鐘的事件，而且要保持網(wǎng)絡(luò)通暢，要耐心等待。

當(dāng)出現(xiàn)下圖代表這一步已經(jīng)完成。

然后在命令框輸入 cnpm install vue ，這也需要一點(diǎn)點(diǎn)的時(shí)間，當(dāng)出現(xiàn)下圖表示安裝成功了。

如果這兩步?jīng)]有異常就是整個(gè)vue的環(huán)境搭建成功了，如果不成功，請(qǐng)重復(fù)上述操作。

(3)搭建vue-cli

Vue-cli是vue官方提供的一個(gè)命令行工具（vue-cli），可用于快速搭建大型單頁(yè)應(yīng)用。該工具提供開(kāi)箱即用的構(gòu)建工具配置，帶來(lái)現(xiàn)代化的前端開(kāi)發(fā)流程。只需一分鐘即可　　啟動(dòng)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目。這里我們提供 vue-cli 建立項(xiàng)目的簡(jiǎn)單步驟。

此時(shí)，你需要進(jìn)入到你安裝Vue.js的文件夾，建立一個(gè)新的文件夾，這個(gè)隨意，別起中文名就好，比如說(shuō)叫 VueTest。

這里可能有朋友粗心又找不著了，可以嘗試到C盤，Users文件夾下管理員或非管理員文件夾下尋找。查看有沒(méi)有這個(gè) node_modules 的文件夾。找到以后，在命令行中　　點(diǎn)到你的vue文件夾。

比如：cd myword/vue

這只是個(gè)例子，你要按照自己的文件目錄來(lái)打開(kāi)。強(qiáng)調(diào)一下，最基礎(chǔ)的命令行指令要會(huì)， cd 是打開(kāi)那一層目錄的意思，有興趣的可以百度一下命令行的指令。諸如　　　　windows、Linux等操作系統(tǒng)，這些指令基本都大差不差。

建好文件夾以后，進(jìn)入到我們的 VueTest文件夾

安裝webpack，打開(kāi)命令行工具輸入：

npm install webpack -g

如果成功 輸入 webpack -v 會(huì)提示版本信息

在cmd命令框輸入
cnpm install -g vue-cli

將出現(xiàn)如下界面

在命令框內(nèi)鍵入 vue ,將會(huì)看到如下描述:

然后在命令行鍵入 vue init webpack 項(xiàng)目名稱 ，將會(huì)有一大串關(guān)于你這個(gè)項(xiàng)目的配置，如圖所示

cd 命令進(jìn)入創(chuàng)建的工程目錄，首先cd 自己建工程的名字；

安裝項(xiàng)目依賴：npm install，因?yàn)樽詣?dòng)構(gòu)建過(guò)程中已存在package.json文件，所以這里直接安裝依賴就行。

安裝 vue 路由模塊 vue-router 和網(wǎng)絡(luò)請(qǐng)求模塊 vue-resource，輸入：cnpm install vue-router vue-resource --save。

啟動(dòng)項(xiàng)目，輸入：npm run dev。服務(wù)啟動(dòng)成功后瀏覽器會(huì)默認(rèn)打開(kāi)一個(gè)“歡迎頁(yè)面”。

以上就是完整的搭建Vue.js項(xiàng)目的流程，若有錯(cuò)誤之處希望朋友們能夠指正。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論