前端框架VUE——安裝及初始化

本篇文章適合，想要學習 vue，但對 vue 又沒有接觸過的同學閱讀，是非常基礎的內容。告訴大家使用 vue 時的安裝方式，及如何建立例項，展示內容。

一、安裝方式

vue 是一種前端框架，所以使用前我們必須安裝，有三種安裝方式分別為：

1.1、使用 script 標籤引入

在 vue 官方文件，我們可以下載開發版本和生產版本兩個 js 檔案，生產版本是經過壓縮，刪除註釋，警告等，比開發版本檔案要小，下載之後直接通過 script 標籤引入，Vue 會被註冊為一個全域性變數。

//使用

<script src="static/js/vue.js"></script>

1.2、CDN

使用 cdn 方式引入 vue.js 檔案，與上述 script 標籤引入是類似的，使用 cdn 引入需要注意引入檔案的版本號，建議連結到一個明確的版本號和構建檔案，避免新版本造成影響。

//使用

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

1.3、NPM

vue 構建大型應用專案時，推薦使用 npm 安裝，因為 npm 能很好的和 webpack 或 browserify 模組打包器配合使用，同時 vue 也提供配套工具來開發單檔案元件。

什麼是腳手架？

vue 提供了一個官方的 cli，為單頁面應用(SPA)快速搭建繁雜的腳手架。它為現代前端工作流提供了開箱即用的構建設定。

使用 npm 安裝 vue 之前，需要先安裝 node.js 環境。

// 安裝語法

npm install vue

1.4、Bower

# 最新穩定版本

$ bower install vue

二、初始化

突然想起一個特別有意思的話，程式設計師遍地都是物件，唯獨我沒有物件。聽起來特別扎心的一句話，作為程式媛的妹子之前也有過這種苦惱，不過我還是要告訴你一句，緣分未到，靜待緣來！

vue例項化的時候，與我們面向物件的例項是一樣的，想看《面向物件》的，可自行翻看下。

建立一個 vue 例項，程式碼如下：

var vm = new Vue({

    el:'#app',

  data(){

   //定義資料

  }

})

vm 是（ViewModel）的縮寫，表示 Vue 的例項。

例項化時，可傳入一個選項物件，選項物件中可以加入很多選項。

el 是用於掛載要管理的元素，el之外的元素不會被vue解析。

data 用於定義繫結到元素的資料。

三、第一個 vue 頁面

做一個簡單的 hello world 頁面，我們使用cdn方式引入vue。具體例項程式碼如下：

<!DOCTYPE html>

<html lang="en">

<head>

 <title>Document</title>

</head>

<body>

 <div id="app">{{msg}}</div>

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 <script>

  let app = new Vue({

  el:"#app",

  data(){

   return{

    msg:'hello world'

   }

  }

 })

 </script>

</body>

</html>

開啟網頁，正常執行，顯示 hello world。

3.1、如果我們繼續給div新增一個兄弟節點，繼續展示 msg 資料，如：

<div id="app">{{msg}}</div>

 <div>{{msg}}</div>

執行結果如圖：

此時我們發現 {{msg}} 並沒有被解析，直接原樣輸出。是因為，el 掛載要管理的元素，而後邊的 div 沒有在管理元素內，所以直接輸出了，並沒有解析內容。

值得注意的是，開發時，需要解析的內容都要放到被掛載管理的元素內。

前端框架VUE——安裝及初始化