前言
系列文章目录：
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. Vue Devtools
在浏览器上安装 Vue Devtools，可以在一个更友好的界面中审查和调试 Vue 应用。
1.1 下载
根据浏览器选择对应的进行安装
1.2 谷歌浏览器无法访问插件商店时安装Vue Devtools
尝试在官网的GitHub上下载文件压缩包，安装失败后，在 Chrome 浏览器安装Vue Devtools调试工具 (详细教程) 本博客中的评论找到答案：
推荐一个下载vue-devtools插件商店，直接下载拖拽到扩展程序就可以了， https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521
打开文件所在位置
打开谷歌安转拓展
打开开发者模式
将刚刚下载的文件拖入浏览器
打开插件
进入插件设置
2. 下载并在页面引入 Vue
2.1 Vue的下载
ps：后面会使用 vue-cli 或 vite（脚手架）直接构建 vue 项目，不用手动引入 vue。
下载的 vue 文件
2.2 Vue的引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 引入下载的 vue --> <!-- <script src="./js/vue.js"></script> --> <!-- 使用CDN引入 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </body> </html>
2.3 页面控制台警告提示解决
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 引入下载的 vue --> <script src="./js/vue.js"></script> <!-- 使用CDN引入 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> --> <script> Vue.config.productionTip = false </script> </body> </html>
