搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)

第一步:到Vue官网上下载开发版本

网页链接:https://cn.vuejs.org/v2/guide/installation.html
搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)_第1张图片
将下载的vue.js文件拖至新建的vue项目中。

第二步: 在项目中引入vue.js文件

搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)_第2张图片
这时运行此网页,打开网页控制台,输入Vue,若没有出错误,而是出现下图的相关信息,则表示vue引入成功。同时控制台也出现了两个小提示(解决办法如下
搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)_第3张图片

处理控制台提示信息

1. 处理第一个小提示
下载vue开发者工具vue-devtools即可。
vue-devtools下载链接:https://pan.baidu.com/s/1Bmk9FGgMeU3p-iphwv3oew
提取码:8888
Chrome浏览器安装方式:
①:点击右上角三个点
②:点击更多工具
③:点击扩展程序
④:点击打开右上角的开发者模式
⑤:将下载的Vue.crx文件直接拖动到浏览器窗口即可
搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)_第4张图片
搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)_第5张图片

此时再次打开网页,第一个小提示没有出现,成功啦!
搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)_第6张图片
注意:有的到这步可能还不行的化,可以试试点击插件上的详情,开启允许访问文件网址和在无痕模式下启用搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)_第7张图片

2. 处理第二个小提示
在代码中修改Vue.config.productionTip设置值为false,以阻止 vue 在启动时生成生产提示。
搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)_第8张图片
搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)_第9张图片

你可能感兴趣的:(vue.js,前端,javascript)