- 編寫Vue采用vscode或hbuilder X都是不錯的選擇，我這裡采用的是vscode，插件多功能也強大。
- VSCode中代碼在浏覽器中打開及實時重新整理需要安裝livereload插件，步驟如下：
在VSCode中：Ctrl + Shift+ P，搜素livereload，并回車/點選“Live Server”。
或直接點選左邊的擴充搜尋Live Server即可查詢到
這樣使用vscode時寫代碼完成直接儲存後浏覽器也就能同步執行了，省去了不必要的浏覽器重新整理麻煩。
- 首先得導入vue.js，
<!-- 開發環境版本，包含了有幫助的指令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 複制
或直接在官網在下載下傳vue.js引入即可，目前最新的vue版本已經到入3.0了。
- 建立一個存放Vue projects的檔案夾，再建立一個lib（庫）檔案夾，用于存放vue.js.
- vscode快速引入HTML模闆，Ctrl+!+Tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--1.導入Vue的包-->
<script src="./lib/vue.js"></script>
</head>
<body>
<!-- 将來new的Vue執行個體，會控制這個元素中的所有内容 -->
<!-- Vue執行個體所控制的這個元素區域，就是我們的 V -->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
//2.建立一個Vue的執行個體
//當我們導入包之後，在浏覽器的記憶體中，就多了一個Vue構造函數
//注意：new出來的這個 vm 對象，就是MVVM中的 VM 排程者
var vm = new Vue({
el: '#app', //表示目前new的這個Vue執行個體，要控制頁面哪個區域
//這裡的 data 就是MVVM中的 M,專門用來儲存 每個頁面的資料
data: {
msg:'歡迎學習Vue' //通過Vue提供的指令，很友善的就能把資料渲染到頁面上，程式員不再手動操作DOM元素。【前端的Vue之類的架構，不提倡去手動操作DOM元素了】
}
})
</script>
</body>
</html> 複制
- 打開