前言

系列文章目录：
[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>

[Vue]开发环境搭建相关推荐

Vue 开发环境搭建（Mac 版）
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
laravel+vue开发环境搭建
From: https://www.jianshu.com/p/1c2cc11ba46f 描述最近通过laravel在公司做了一些项目,但本身前端出身的我,总是感觉lphp开发过程中,前端写好页面, ...
一 vue开发环境搭建
2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...
vue开发环境搭建Mac版
一.前言因工作缘故,需要做一个移动端app,面对2016下半年至今webapp最流行的三个技术React,angular,vue,三选一,如何先,经过前期的技术选型,最后决定使用vue.具体查看本人 ...
Vue开发环境搭建及在docs新建vue项目
参考: https://www.cnblogs.com/winter92/p/7117057.html (写在开头的废话:相信很多人在学习vue这个框架时,最开始搭建开发环境,容易遇到一些大大小小的坑 ...
vue 开发环境搭建
1.创建vue项目 1.node js 生成项目,编译项目 2.hbuilder 开发环境 1.下载安装node js http://nodejs.cn/download/ 确认是否安装成功如果安装 ...
Vue开发环境搭建和vue-cli脚手架
vue本质是一个js脚本,提供了一个前端框架.在开发时,可以直接引入这个js脚本,也可以使用脚手架工具,在本地搭建一个项目. Vue.js安装方法一.在 Vue.js 的官网上直接下载 vue.mi ...
Vue开发环境搭建详细操作（NodeCnpmVue）
目录一.安装node.js 二.安装cnpm 三.安装Vue 四.常用命令五.其他扩展信息一.安装node.js 1.官网下载地址:Download | Node.js 2.设置nodejs p ...
Cesium Vue开发环境搭建
最近被问到如何在 vuejs 中集成 cesium,首先想到的官网应该有教程.官网有专门讲 Cesium and Webpack(有坑),按照官网的说明,动手建了一个Demo,在这记录下踩坑过程. 一 ...
VS Code + Vue 开发环境搭建
1.下载并安装 Visual Studio Code 2019 2.Visual Studio Code 2019安装成功后,打开VS Code 工具点击左侧[扩展]菜单,在搜索栏中输入 Chines ...

[Vue]开发环境搭建

前言

文章目录

1. Vue Devtools

1.1 下载

1.2 谷歌浏览器无法访问插件商店时安装Vue Devtools

2. 下载并在页面引入 Vue

2.1 Vue的下载

2.2 Vue的引入

2.3 页面控制台警告提示解决

[Vue]开发环境搭建相关推荐

最新文章

热门文章