【Vue 教程】开发环境搭建

文章归档于：Vue

---

🧰 IDE

• Vue 官方推荐的 IDE（集成开发环境）是 VSCode

💠 VSCode 拓展插件

🚩 Volar

• 
• 如果使用的 Vue 大版本为 3，那么官方推荐的开发拓展插件为 Volar。
• Volar 为 Vue 开发提供了语法高亮、TypeScript 支持，以及模板内表达式与组件 props 的智能提示。
• 关于 Volar 更多特性的说明可以参考：
  • https://marketplace.visualstudio.com/items?itemName=Vue.volar
  • Volar ——Vue3 完美的配套工具：https://blog.csdn.net/qq_41800366/article/details/120363622
  • Volar - vue终极开发神器！：https://blog.csdn.net/qq_36157085/article/details/118404344
• 这里补充一下，如果使用的 Vue 大版本为 2，那么官方推荐的开发拓展插件为 Vetur，如果之前安装并启用了 Vetur，为了避免冲突，需要确保在 Vue 3 的项目中禁用 Vetur。
  • Vetur：https://marketplace.visualstudio.com/items?itemName=octref.vetur

🚩 Vue VSCode Snippets

• 
• Vue VSCode Snippets 为 Vue 2 和 Vue 3 开发提供了代码片段提示
• Vue VSCode Snippets 代码提示片段与相应说明可以参考：https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets

🚩 Vue 3 Snippets

• 
• Vue 3 Snippets 为基于最新的 Vue 2 及 Vue 3 的 API 添加了代码提示。
• Vue 3 Snippets 代码提示前缀与相应说明可以参考：https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

💠 浏览器开发者插件

• Vue 官方为我们提供了 Vue 浏览器开发者插件，Vue Devtools
• Vue Devtools 官网：https://devtools.vuejs.org/
• Vue 的浏览器开发者插件使我们可以浏览一个 Vue 应用的组件树，查看各个组件的状态，追踪状态管理的事件，还可以进行组件性能分析。

🚩 在 Chrome 上安装

• 如果可以访问 Chrome 扩展商店的话，可以直接根据 Vue Devtools 官网中的教程进行安装，https://devtools.vuejs.org/guide/installation.html#chrome
• 如果不能访问 Chrome 扩展商店的话，可以参考：https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521

🚩 在 FireFox 上安装

• https://devtools.vuejs.org/guide/installation.html#firefox

🚩 在 Edge 上安装

• https://devtools.vuejs.org/guide/installation.html#edge

⬇ Vue 的下载与引入

• 这里说明一下，前期学习 Vue 基础语法主要采用 script 标签引入 Vue 的方式，然后直接使用 Vue。
• 我们可以在自己的页面中通过 CDN 链接直接引入使用 Vue，也可以将 Vue 的源码下载到本地后再引入使用本地的 Vue
• 接下来直接使用 Vue 官方文档中提供的全局构建版本的 Vue CDN <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 引入 Vue。
  • https://cn.vuejs.org/guide/quick-start.html#using-the-global-build
• 对于全局构建版本的 Vue，所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上