這篇文章主要介紹了vue.js的安裝方式有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司專注于惠陽(yáng)企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站定制開(kāi)發(fā)?；蓐?yáng)網(wǎng)站建設(shè)公司,為惠陽(yáng)等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站開(kāi)發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

Vue.js（讀音 /vju?/, 類似于 view）是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。

下面介紹三種 Vue.js 的安裝方法：

      1.獨(dú)立版本

    我們可以在Vue.js的官網(wǎng)上直接下載vue.js,并在  開(kāi)發(fā)環(huán)境不要使用最小壓縮版，不然會(huì)沒(méi)有錯(cuò)誤提示和警告！

      2.使用cdn方法

• BootCDN（國(guó)內(nèi)） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （國(guó)內(nèi)不穩(wěn)定）

• unpkg：https://unpkg.com/vue/dist/vue.js, 會(huì)保持和 npm 發(fā)布的最新的版本一致。（推薦使用）

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（）

    3.NPM方法

     在用Vue.js構(gòu)建大型應(yīng)用的時(shí)候推薦使用NPM安裝方法，NPM能很好的和諸如Webpack或者Browserify 模塊打包器配合使用。Vue.js 也提供配套工具來(lái)開(kāi)發(fā)單文件組件。

    首先，先列出我們接下來(lái)需要的東西：

• node.js環(huán)境（npm包管理器）

• vue-cli 腳手架構(gòu)建工具

• cnpm npm的淘寶鏡像

      1） 安裝node.js

           從node.js官網(wǎng)下載并安裝node，安裝過(guò)程很簡(jiǎn)單，一直點(diǎn)下一步就ok了，安裝完之后，我們通過(guò)打開(kāi)命令行工具（win+R）,輸入

       node -v 命令，查看node的版本，若出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明你安裝成功了。

 npm包管理器，是集成在node中的，所以安裝了node也就有了npm,直接輸入 npm -v 命令，顯示npm的版本信息。  

       到目前為止，node的環(huán)境已經(jīng)安裝完成，npm 包管理器也有了，由于有些npm資源被屏蔽或者是國(guó)外資源的原因，經(jīng)常會(huì)導(dǎo)致npm安裝依賴包的時(shí)候失敗，所以我們還需要npm的國(guó)內(nèi)鏡像----cnpm.

    2） 安裝cnpm

          在命令行中輸入  npm install -g cnpm --registry=https://registry.npm.taobao.org  ，然后等待，沒(méi)報(bào)錯(cuò)表示安裝成功，（我的已經(jīng)安裝過(guò)了，顯示更新成功的信息），如下圖：

      完成之后，我們就可以用cnpm代替npm來(lái)安裝依賴包了。如果想進(jìn)一步了解cnpm的，查看淘寶npm鏡像官網(wǎng)。

     3） 安裝vue-cli 腳手架構(gòu)建工具

在命令行中運(yùn)行命令 npm install -g vue-cli ，然后等待安裝完成。

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

首先我們要選擇存放項(xiàng)目的位置，然后再用命令行將目錄轉(zhuǎn)到選定的目錄，在這里，我選擇在c盤(pán)下創(chuàng)建新的目錄（NodeTest 目錄），用cd 將目錄切到該目錄下，如下圖：

在NodeTest 目錄下，在命令行中運(yùn)行命令 vue init webpack firstApp 。解釋一下這個(gè)命令，這個(gè)命令的意思是初始化一個(gè)項(xiàng)目，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的。其中firstApp是整個(gè)項(xiàng)目文件夾的名稱，這個(gè)文件夾會(huì)自動(dòng)生成在你指定的目錄中（我的實(shí)例中，會(huì)在NodeTest 目錄生成該文件夾），如下圖。

   運(yùn)行初始化命令的時(shí)候會(huì)讓用戶輸入幾個(gè)基本的配置選項(xiàng)，如項(xiàng)目名稱、項(xiàng)目描述、作者信息，對(duì)于有些不明白或者不想填的信息可以一直按回車去填寫(xiě)就好了，等待一會(huì)，就會(huì)顯示創(chuàng)建項(xiàng)目創(chuàng)建成功，如下圖:

接下來(lái)，我們?nèi)oteTest目錄下去看是否已創(chuàng)建文件：

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

   介紹一下目錄及其作用：

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

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

    node_modules：npm 加載的項(xiàng)目依賴模塊。

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

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

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

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

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

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

    test：初始測(cè)試目錄，可刪除

     .XXXX文件：配置文件。

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

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

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

   這就是整個(gè)項(xiàng)目的目錄結(jié)構(gòu)，其中，我們主要在src目錄中做修改。這個(gè)項(xiàng)目現(xiàn)在還只是一個(gè)結(jié)構(gòu)框架，整個(gè)項(xiàng)目需要的依賴資源都還沒(méi)有安裝。

   安裝項(xiàng)目所需要的依賴：執(zhí)行 cnpm install   (這里可以用cnpm代替npm了)

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

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

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

   在項(xiàng)目目錄中，運(yùn)行命令 npm run dev ，會(huì)用熱加載的方式運(yùn)行我們的應(yīng)用，熱加載可以讓我們?cè)谛薷耐甏a后不用手動(dòng)刷新瀏覽器就能實(shí)時(shí)看到修改后的效果。

   項(xiàng)目啟動(dòng)后，在瀏覽器中輸入項(xiàng)目啟動(dòng)后的地址：

   在瀏覽器中會(huì)出現(xiàn)vue的logo：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue.js的安裝方式有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!