這篇文章給大家分享的是有關(guān)如何安裝vue.js的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比西寧網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式西寧網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋西寧地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

安裝vue.js的方法：首先從node.js官網(wǎng)下載并安裝node；然后在命令行運(yùn)行命令“npm install -g vue-cli”安裝vue-cli腳手架構(gòu)建工具；最后在項(xiàng)目目錄中，運(yùn)行命令“npm run dev”即可。

1.安裝node.js
從node.js官網(wǎng)下載并安裝node

安裝過程很簡單，一直點(diǎn)下一步就ok了。
1.1我們通過打開命令行工具（win+R）,輸入node -v查看node的版本，若出現(xiàn)相應(yīng)的版本號說明你安裝成功了
1.2.npm包管理器，是集成在node中的，所以安裝了node也就有了npm,直接輸入npm -v 命令，顯示npm的版本信息。

現(xiàn)在node環(huán)境已經(jīng)安裝完成了，npm包管理器也有了，聽說由于有些npm資源被屏蔽或者是國外資源的原因，經(jīng)常會導(dǎo)致npm安裝依賴包的時(shí)候失敗，所以我們還需要npm的國內(nèi)鏡像----cnpm（淘寶的鏡像）
2.安裝cnpm
在命令行中輸入npm install -g cnpm --registry=https://registry.npm.taobao.org ，然后等待，沒報(bào)錯表示安裝成功，（我的已經(jīng)安裝過了，顯示更新成功的信息），如下圖：

完成之后，我們就可以用cnpm代替npm來安裝依賴包了。

3.安裝vue-cli腳手架構(gòu)建工具
在命令行運(yùn)行命令npm install -g vue-cli 然后等待安裝完成。如下圖：

通過以上三個(gè)步驟，我們所需要準(zhǔn)備的環(huán)境和工具都準(zhǔn)備好了，接下來就開始使用vue-cli來構(gòu)建項(xiàng)目。

首先我們要選擇存放項(xiàng)目的位置（在這里我就進(jìn)入E盤了，你也可以進(jìn)入其他盤符來創(chuàng)建）用DOS命令e:先進(jìn)到我的E盤，再輸入dir查看所有E盤中所有的文件及文件夾(可以看到現(xiàn)在E盤并沒有NodeDemo這個(gè)文件夾)

2.接下來我們開始新建一個(gè)文件夾，（在這里我就把創(chuàng)建的NodeDemo文件夾放在E盤了，你也可以選擇其他盤符來存放demo）輸入md NodeDemo然后按回車鍵，注意md后面有一個(gè)空格。然后可以用dir查看一下文件夾是否創(chuàng)建完成：如下圖（我已創(chuàng)建好了）

3.然后再用cd命令將目錄轉(zhuǎn)到選定的目錄:如下圖

在NodeDemo目錄下，在命令行中運(yùn)行命令vue init webpack firstApp。解釋一下這個(gè)命令，這個(gè)命令的意思是初始化一個(gè)項(xiàng)目，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的。其中firstApp是整個(gè)項(xiàng)目文件夾的名稱，這個(gè)文件夾會自動生成在你指定的目錄中（我的實(shí)例中，會在NodeDemo 目錄生成該文件夾），
運(yùn)行初始化命令的時(shí)候會讓用戶輸入幾個(gè)基本的配置選項(xiàng)，如項(xiàng)目名稱、項(xiàng)目描述、作者信息，對于有些不明白或者不想填的信息可以一直按回車去填寫就好了如下圖:

等待一會，就會顯示創(chuàng)建項(xiàng)目創(chuàng)建成功，如下圖

接下來，我們?nèi)タ碞odeDemo目錄下去看是否已創(chuàng)建文件：

打開firstApp項(xiàng)目，項(xiàng)目中的目錄如下：

介紹一下目錄及其作用：

build：最終發(fā)布的代碼的存放位置。

config：配置路徑、端口號等一些信息，我們剛開始學(xué)習(xí)的時(shí)候選擇默認(rèn)配置。

node_modules：npm 加載的項(xiàng)目依賴模塊,（整個(gè)項(xiàng)目需要的依賴資源）

src：這里是我們開發(fā)的主要目錄，基本上要做的事情都在這個(gè)目錄里面，里面包含了幾個(gè)目錄及文件：

assets:放置一些圖片，如logo等

components:目錄里放的是一個(gè)組件文件，可以不用。

App.vue：項(xiàng)目入口文件，我們也可以將組件寫這里，而不使用components目錄。

main.js ：項(xiàng)目的核心文件

static：靜態(tài)資源目錄，如圖片、字體等。

test：初始測試目錄，可刪除

.XXXX文件：配置文件。

index.html：首頁入口文件，可以添加一些meta信息或者同統(tǒng)計(jì)代碼啥的。

package.json：項(xiàng)目配置文件。

README.md：項(xiàng)目的說明文件。

這就是整個(gè)項(xiàng)目的目錄結(jié)構(gòu)，其中，我們主要在src目錄中做修改。
（第一次創(chuàng)建vue項(xiàng)目的話 好像node_modules這個(gè)依賴包資源就會沒有，反正沒有的話就cnpm install 安裝一下依賴就好了）我這個(gè)項(xiàng)目現(xiàn)在創(chuàng)建完就有 node_modules這個(gè)依賴包資源文件夾了就不用 再cnpm install 安裝依賴包資源。

安裝項(xiàng)目所需要的依賴先cd 進(jìn)入到firstApp文件夾先

然后：執(zhí)行cnpm install (這里可以用cnpm代替npm了)

安裝完成之后，我們到自己的項(xiàng)目中去看，（如果沒有的話）會多一個(gè)node_modules文件夾，這里面就是我們所需要的依賴包資源。

安裝完依賴包資源后，我們就可以運(yùn)行整個(gè)項(xiàng)目了。運(yùn)行項(xiàng)目前一定要確保依賴包資源存在

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

在項(xiàng)目目錄中，運(yùn)行命令 npm run dev ，會用熱加載的方式運(yùn)行我們的應(yīng)用，熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實(shí)時(shí)看到修改后的效果。

項(xiàng)目啟動后，在瀏覽器中輸入項(xiàng)目啟動后的地址：localhost:8080
在瀏覽器中會出現(xiàn)vue的logo：

感謝各位的閱讀！關(guān)于如何安裝vue.js就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文題目：如何安裝vue.js-創(chuàng)新互聯(lián)
URL鏈接：http://aaarwkj.com/article36/coehpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站策劃、全網(wǎng)營銷推廣、建站公司、靜態(tài)網(wǎng)站、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)