- 編寫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>
- 打開
![在這裏插入圖片描述]()
