Vue的安裝及使用（Vue的三種安裝使用方式）

vue是一個

JavaMVVM

庫，是一套用于建構使用者界面的漸進式架構，是初創項目的首選前端架構。它是以資料驅動群組件化的思想建構的，采用自底向上增量開發的設計。它是輕量級的，它有很多獨立的功能或庫，我們會根據我們的項目來選用vue的一些功能。它提供了更加簡潔、更易于了解的API，使得我們能夠快速地上手并使用

Vue.js

。

VUE安裝的三種方式：

安裝環境

作業系統：Windows 10 64位

方法一：獨立版本

我們可以在Vue.js 的官網上直接下載下傳vue.js，并在.html中通過<‘script’>标簽中引用。

直接下載下傳并用 <script’> 标簽引入，Vue 會被注冊為一個全局變量。

開發版本：https://v1-cn.vuejs.org/js/vue.js

(包含完整的警告和調試模式)

生産版本：https://v1-cn.vuejs.org/js/vue.min.js

(删除了警告，26.03kb min+gzip)

重要提示：在開發時使用開發版本，遇到常見錯誤它會給出友好的警告。

方法二：使用CDN方法

jsdelivr：https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js

版本更新可能略滞後

cdnjs：https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js

版本更新可能略滞後

bootcdn : https://cdn.bootcss.com/vue/2.2.2/vue.min.js

（國内不穩定）

unpkg：https://unpkg.com/vue/dist/vue.js (會保持和 npm 釋出的最新的版本一緻)

（推薦使用）

npmcdn：https://npmcdn.com/vue/dist/vue.min.js

也可以使用 npmcdn，這個連結指向釋出到 npm 上的最新穩定版本。 可以在 npmcdn.com/vue/ 上檢視包的源碼類似的還有unpkg.com/vue/ 。

示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
           

方法三：npm方法（推薦使用）

1.Node.js安裝

官網下載下傳位址： https://nodejs.org/en/download/

我的是 Windows 10 64位 我這裡就下載下傳安裝版的。

這裡沒難度，安裝一直下一步使用預設配置即可。（截圖省略）

2.執行npm install --global vue-cli ，全局安裝vue-cli

因為預設是從國外伺服器下，可以使用阿裡巴巴在國内的鏡像伺服器。

産生通過config指令設定預設下載下傳路徑：

npm config set registry https://registry.npm.taobao.org 
           

然後再執行：

npm install --global vue-cli
           

3.安裝後，檢查是否安裝成功

vue -V
           

4.使用vue建一個項目名叫“my-project”，注意項目名不能有大寫。

vue init webpack my-project
           

注：

vue-cli

的模闆包括

webpack

和

webpack-simple

,前者是比較複雜專業的項目，他的配置并不全放在根目錄下的

webpack.config.js

中。

webpack-simple

相對簡單的，它根目錄下才有個

webpack.config.js

5.注意：

項目建立過程中，有如下選擇，選擇NO。（該選項為使用ESLint規範你的代碼，一個空格錯誤都将報錯，不開啟，避免不必要的麻煩）。

後兩項為單元測試，可以選擇No.

6.項目建立完成後，目錄結構如下：

7.安裝項目所需依賴，進入項目中：

npm install
           

完成後，會發現項目目錄下多出一個node_modules檔案夾，裡面就是 vue-cli 建立的一個基于 webpack 的 vue.js 項目。

8.進入項目目錄檔案夾（my-project）中，就可以使用vue進行開發啦

9.使用npm run dev，便可以打開本地伺服器實時檢視效果（http://localhost:8080）

如果浏覽器打開之後，沒有加載出頁面，有可能是本地的 8080 端口被占用，需要修改一下配置檔案 config>index.js

建議将端口号改為不常用的端口。另外我還将 build 的路徑字首修改為 ’ ./ '（原本為 ’ / '），是因為打包之後，外部引入 js 和 css 檔案時，如果路徑以 ’ / ’ 開頭，在本地是無法找到對應檔案的（伺服器上沒問題）。是以如果需要在本地打開打包後的檔案，就得修改檔案路徑。

10.初始效果

11.退出監聽，可以直接Ctrl+C，選擇Y。

參考：

1、部落格園——安裝VUE教程

https://www.cnblogs.com/binmengxue/p/6831850.html

2、Vue官網——安裝教程

https://v1-cn.vuejs.org/guide/installation.html

本文來自部落格園，作者：明金同學，轉載請注明原文連結：https://www.cnblogs.com/vmuu/p/15663287.html

公衆号：【明金同學】