vue.js有幾種安裝方式

vue.js常見的有3種安裝方式：1、在Vue.js官網上直接下載vue.js文件，並在html中透過script標籤中引用；2、使用CDN方法，在html的script標籤中直接使用CDN連結進行引用；3、使用NPM工具進行安裝。

本教學操作環境：windows7系統、vue2.9版，此方法適用於所有品牌電腦。

相關推薦：《vue.js教學》

Vue.js（發音/vjuː/, 類似view）是一個建構資料驅動的web 介面的漸進式框架。 Vue.js 的目標是透過盡可能簡單的 API 實現回應的資料綁定和組合的視圖元件。它不僅易於上手，還便於與第三方函式庫或既有專案整合。

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

獨立版本

我們可以在Vue.js的官網上直接下載vue. js,並在html中透過<script></script>標籤中引用。 <script src="../vue.js"> </script> 開發環境不要使用最小壓縮版，不然會沒有錯誤提示和警告！ （頁面中直接使用）

使用vue多頁面開發：

引入vue.js
建立一個vue根實例new Vue({選項})

使用CDN方法

BootCDN（國內） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （國內不穩定性）        # ##unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和npm 發布的最新的版本一致。 （建議使用）

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

）

#NPM方法（建議使用）

在用Vue.js建立大型應用程式的時候推薦使用NPM安裝方法，NPM能很好的和諸如

Webpack

或Browserify模組打包器配合使用。 Vue.js 也提供配套工具來開發單一檔案元件。 首先，先列出我們接下來需要的東西：

node.js環境（npm套件管理器）
#vue-cli 鷹架建構工具
cnpm npm的淘寶鏡像

安裝node.js

##從node.js官網下載並安裝node，安裝過程很簡單，一直點下一步就ok了，安裝完之後，我們透過開啟命令列工具（win R）,輸入node -v 指令，查看node的版本，若出現對應的版本號，表示你安裝成功了。

npm套件管理器，是整合在node中的，所以安裝了node也就有了npm,直接輸入 npm -v 指令，顯示npm的版本資訊。

到目前為止，node的環境已經安裝完成，npm 套件管理器也有了，由於有些npm資源被屏蔽或者是國外資源的原因，經常會導致npm安裝依賴套件的時候失敗，所以我們還需要npm的國內鏡像----cnpm.

#安裝cnpm

在命令列中輸入  npm install -g cnpm --registry=http://registry.npm.taobao.org ，然後等待，沒報錯表示安裝成功，（我的已經安裝過了，顯示更新成功的資訊），如下圖：

完成之後，我們就可以用cnpm取代npm來安裝依賴套件了。如果想進一步了解cnpm的，請查看淘寶npm鏡像官網。

 安裝vue-cli 鷹架建置工具（必須在全域中進行安裝）

在命令列中執行指令npm install -g vue-cli ，然後等待安裝完成。

• 是否安裝成功：vue -V

• webpack的版本查詢：webpack -v

# #透過以上三部，我們需要準備的環境和工具都準備好了，接下來就開始使用vue-cli來建置專案。

首先我們要選擇存放項目的位置，然後再用命令列cd到專案的目錄中，在這裡，我選擇在c盤下建立新的目錄（NodeTest 目錄），用cd 將目錄切到該目錄下，如下圖：

在NodeTest 目錄下，在命令列中執行指令 vue init webpack firstApp（初始化一個完整版的專案） 。解釋一下這個指令，這個指令的意思是初始化一個項目，其中webpack是建構工具，也就是整個專案是基於webpack的。其中firstApp是整個專案資料夾的名稱，這個資料夾會自動產生在你指定的目錄中（我的實例中，會在NodeTest 目錄產生該資料夾），如下圖：

如果我們在編輯器中已經手動建立了這個專案存放的資料夾cd到專案中：vue init webpack;初始化一下即可,同時也會載入webpack所依賴的套件：

是否是在本目錄下進行建立

輸入指令後，會詢問我們幾個簡單的選項，我們根據自己的需求進行填寫就可以了。

• Project name :專案名稱 ，如果不需要更改直接回車就可以了。注意：這裡不能使用大寫，所以我把名稱改成了vueclitest
• Project description:專案描述，預設為A Vue.js project,直接回車，不用寫。
• Author：作者，如果你有設定git的作者，他會讀取。
• Install vue-router? 是否安裝vue的路由插件，我們這裡需要安裝，所以選擇Y
• Use ESLint to lint your code? 是否用ESLint來限制你的程式碼錯誤和風格。我們這裡不需要輸入n（建議），如果你是大型團隊開發，最好是進行設定。
• setup unit tests with Karma Mocha? 是否需要安裝單元測試工具Karma Mocha，我們這裡不需要，所以輸入n。
• Setup e2e tests with Nightwatch?是否安裝e2e來進行使用者行為模擬測試，我們這裡不需要，所以輸入n

運行初始化命令的時候會讓用戶輸入幾個基本的配置選項，如項目名稱、項目描述、作者信息，對於有些不明白或者不想填的信息可以一直按回車去填寫就好了，等待一會，就會顯示創建項目創建成功，如下圖:

 接下來，我們去NoteTest目錄下去看是否已建立檔案：

  開啟firstApp 項目，專案中的目錄如下：

介紹目錄及其作用：

• build：最終發布的程式碼的存放位置。
• config：設定路徑、連接埠號碼等一些訊息，我們剛開始學習的時候選擇預設配置。
• node_modules：npm 載入的專案所需的各種依賴模組。
• src：這裡是我們開發的主要目錄（原始碼），基本上要做的事情都在這個目錄裡面，裡麵包含了幾個目錄及檔案：
  • assets:放置一些圖片，如logo等
  • components:目錄裡放的是一個個的元件檔
  • router/index.js：設定路由的地方
  • App.vue：項目入口組件（跟組件），我們也可以將組件寫這裡，而不使用components目錄。主要作用是將我們自己定義的元件透過它與頁面建立聯繫進行渲染，這裡面的必不可少。
  • main.js ：專案的核心檔案（整個專案的入口js）引入依賴套件、預設頁面樣式等（專案運行後會在index.html中形成一個app.js檔案）。
  • static：靜態資源目錄，如圖片、字體等。
  • test：初始測試目錄，可刪除
• .XXXX檔案：設定檔。
• index.html：html單頁面的入口頁面，可以加入一些meta資訊或是同統計程式碼啥的或頁面的重置樣式等。
• package.json：專案設定資訊檔案/所依賴的開發套件的版本資訊及所依賴的插件資訊。
• README.md：專案的說明檔。
• webpack.config.js：webpack的設定文件，把.vue的文件打包成瀏覽器能讀懂的文件。
• .babelrc:是偵測es6語法的檔案的設定
• .getignore:忽略檔案的設定（例如模擬本地資料mock不讓他在get提交/打包上線的時候忽略不使用可在這裡配置）
• .postcssrc.js:前綴的配置
• .eslintrc.js:配置eslint語法規則（在這裡面的rules屬性中配置讓哪個語法規則失效）
• .eslintignore:忽略eslint對專案某些檔案的語法規則的檢查

這就是整個專案的目錄結構，其中，我們主要在src目錄中做修改（模組化開發）。這個專案現在還只是一個結構框架，整個專案所需的依賴資源都還沒有安裝。

cd 專案名稱；進入專案中

安裝專案所需的依賴套件/外掛程式（在package.json可查看）：執行cnpm install (npm可能會有警告，這裡可以用cnpm代替npm了，運行別人的程式碼需要先安裝依賴)如果創建專案的時候沒有報錯，這一步可以省略。如果報錯了cd到專案裡面執行cnpm install   /  npm install

若拿到別人的專案或從gethub下載的專案第一步就是要在專案中cnpm install;下載專案所依賴的插件，然後npm run dev 執行專案

## 安裝完成之後，我們到自己的專案去看，會多一個node_modules資料夾，這裡面就是我們所需要的依賴套件資源。

安裝完依賴套件資源後，我們就可以執行整個專案了。

執行專案

在專案目錄中，執行指令 npm run dev （npm run start），會以熱載入的方式執行我們的應用，熱載入可以讓我們在修改完程式碼後不用手動刷新瀏覽器就能即時看到修改後的效果。

  專案啟動後，瀏覽器中輸入專案啟動後的位址：

 在瀏覽器中會出現vue的logo：

至此，vue的三種安裝方式已介紹完成。

專案完成後輸入打包指令:cnpm run build;會產生一個dist文件，就是我們的打包文件，點選.html檔案能運作則成功。

建置vue的開發環境（大綱）

• #必須安裝node.js

##搭建vue的開發環境，安裝vue的鷹架工具官方命令列工具
• npm install - -global vue-cli

建立專案必須cd到對應的一個專案裡面

• vue init webpack vue-demo01
  #cd  vue-demo01

• cnpm install   /  npm install 若建立專案的時候沒有報錯，這一步可以省略。如果報錯了cd到專案裡面執行cnpm install   /  npm install

• npm run dev/npm run start

#npm run dev/npm run start

#npm run dev/npm run start

#npm run dev/npm run start

#另一種建立專案的方式中小型專案（建議）

vue init webpack-simple vuedemo02

cd vuedemo02

cnpm install / npm install#npm run dev

拿到別人的專案不能正常運作後看有沒有node_modules這個檔案（專案所有的依賴），若沒有cd到專案中安裝專案的依賴：cnpm install/npm install

相關推薦：
##2020年前端vue面試題大匯總（附答案）

#########vue教學推薦：2020最新的5個vue.js影片教學精選############更多程式設計相關知識，請造訪：###程式設計教學###！ ！ ######

以上是vue.js有幾種安裝方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！