[Vue]开发环境搭建

小炜1128

已于 2022-09-23 12:21:54 修改

阅读量544

点赞数

分类专栏： Vue 学习笔记文章标签： vue.js 前端 javascript 前端框架 chrome devtools

于 2022-05-06 17:24:12 首次发布

本文链接：https://blog.csdn.net/m0_53022813/article/details/124612823

版权

Vue 学习笔记专栏收录该内容

90 篇文章 27 订阅

订阅专栏

在这里插入图片描述

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

前言
1. Vue Devtools
1.1 下载
1.2 谷歌浏览器无法访问插件商店时安装Vue Devtools

2. 下载并在页面引入 Vue
2.1 Vue的下载
2.2 Vue的引入
2.3 页面控制台警告提示解决

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>

请添加图片描述

小炜1128

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
[Vue]开发环境搭建

1. Vue Devtools1.1 下载1.2 谷歌浏览器无法访问插件商店时安装Vue Devtools2. 下载并在页面引入 Vue2.1 Vue的下载2.2 Vue的引入2.3 页面控制台警告提示解决
复制链接

扫一扫