搭建 Vuejs開(kāi)發(fā)環(huán)境的方法

這篇文章將為大家詳細(xì)講解有關(guān)搭建 Vuejs開(kāi)發(fā)環(huán)境的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

 Vue.js

Vue.js是目前很火的一個(gè)前端框架，采用MVVM模式設(shè)計(jì)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用，特別適合單頁(yè)應(yīng)用的開(kāi)發(fā)。

Vue.js是數(shù)據(jù)驅(qū)動(dòng)的，它通過(guò)一些特殊的語(yǔ)法，將DOM和數(shù)據(jù)綁定起來(lái)，無(wú)需手動(dòng)操作DOM。一旦創(chuàng)建了綁定，DOM將和數(shù)據(jù)保持同步，每當(dāng)變更了數(shù)據(jù)，DOM也會(huì)相應(yīng)地更新。

一、安裝NPM

1.1最新穩(wěn)定版本：

npm install vue

二、命令行工具安裝

國(guó)內(nèi)速度慢，使用淘寶鏡像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意：以后使用npm的地方就替換成cnpm

1、全局安裝vue-vli

    cnpm install -g vue-cli

2、創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目

vue init webpack my-project

輸入安裝命令后，稍等一會(huì)提示輸入：

2.1項(xiàng)目項(xiàng)目名稱：

2.2項(xiàng)目描述：

2.3作者：

2.4是否使用ESlint：（可以選擇不需要，ESlint是一套語(yǔ)法檢查工具）

2.5是否需要單元測(cè)試：（可以選擇不需要）

說(shuō)明：

       webpack：項(xiàng)目類型，用webpack這套模板進(jìn)行壓縮和打包。

       my-project：項(xiàng)目名稱。

3、安裝依賴

3.1進(jìn)入項(xiàng)目：

cd my-project

3.2安裝依賴：

cnpm install

說(shuō)明：

3.2.1會(huì)將依賴安裝到項(xiàng)目node_modules文件夾中。

3.2.2可以使用cnpm命令，是因?yàn)閣ebpack安裝好了相應(yīng)依賴。

3.2.3 Package.json文件說(shuō)明:

             主要包含:項(xiàng)目描述、相關(guān)依賴。

3.3運(yùn)行項(xiàng)目：

cnpm run dev 

通過(guò)訪問(wèn)http://127.0.0.1:8080訪問(wèn)運(yùn)行起來(lái)的項(xiàng)目。

關(guān)于“搭建 Vuejs開(kāi)發(fā)環(huán)境的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。