Vue單頁面開發環境安裝

2021-11-16 23:50:00

1. 背景

Vue有兩種使用方式，第一種比較簡單，通過<script>标簽直接将Vue引入頁面後，在目前頁面使用Vue即可。

第二種方式比較複雜，是通過NPM建構工程化的Vue項目，當然複雜有複雜的好處，可以使用的功能更加多，可以支撐複雜應用的開發。

在入門學習階段，可以使用第一種方式，快速入門。在熟悉了Vue方方面面後，再使用第二種方式深入學習使用。

2. 使用标簽引入Vue

可以直接通過CDN引入Vue，開發環境使用如下方式，可以檢視警告和調試資訊。

生産環境下可以使用更加精簡的版本，提高運作效率

當然也可以直接下載下傳到項目中，自行加以引用，此處附上下載下傳連結：下載下傳連結。

3. 測試一下

接下來可以使用一段代碼測試下是否生效。

<html>

<head>

</head>

<body>

展示資訊:{{message}}

</div>

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue'

}

});

</script>

</body>

</html>

如上代碼，如果在頁面上能顯示展示資訊:Hello Vue，表明咱們的安裝配置成功了。

4. 總結

通過<script>建立Vue的安裝環境，與引入一般的js檔案庫沒有啥差別。

這種方式足夠簡單，一般用于單頁面網頁開發。

繼續閱讀