如何安裝vue.js-創(chuàng)新互聯(lián)

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

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

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

1.安裝node.js
從node.js官網下載并安裝node

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

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

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

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

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

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

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

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

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

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

接下來，我們去看NodeDemo目錄下去看是否已創(chuàng)建文件：

打開firstApp項目，項目中的目錄如下：

介紹一下目錄及其作用：

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

config：配置路徑、端口號等一些信息，我們剛開始學習的時候選擇默認配置。

node_modules：npm 加載的項目依賴模塊,（整個項目需要的依賴資源）

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

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

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

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

main.js ：項目的核心文件

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

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

.XXXX文件：配置文件。

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

package.json：項目配置文件。

README.md：項目的說明文件。

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

安裝項目所需要的依賴先cd 進入到firstApp文件夾先

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

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

安裝完依賴包資源后，我們就可以運行整個項目了。運行項目前一定要確保依賴包資源存在

運行項目

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

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

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

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

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

廣告

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