1.vue基础(一)引入vue.js


个人是跟着尚硅谷的课程做的笔记****

-----个人第一篇博客,纯是记录自己学习的过程,有哪些错误请各位大神指点----

1.直接引入vue.js文件

<script type="text/javascript" src="../js/vue.js"></script>

文件在vue官网可以直接下载。

2.CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

3.注意事项(其中的小问题)

注意:运行之后控制台会报两个小提示(不是错误啊!!!!)

image-20220412182222986

一、第一个小提示的意思是:推荐你在谷歌浏览器上安装官方推出的vue开发者工具。

解决办法:安装vue开发者工具,步骤如下:

  1. 打开vue官网,在安装目录下的vue devtools目录中,点击图中的红框。

  2. 会打开一个github网址,点击图中的红框。

  3. 点击图中的红框。

  4. 点击下载(我这里是删除,因为我安装了。打开谷歌的应用商店,这里需要FQ,或者到我的下载里下载即可,不需要积分哦!!!)

  5. 如何验证插件安装成功呢,在你浏览器的右上方会有一个vue的小图标,为什么没亮呢,因为你还没用vue呢。在我这里下载的人,怎么安装呢???打开谷歌浏览器,右上角三个点->更多工具->扩展程序->右上角打开开发者模式,把文件直接拖进去即可哦!!!

  6. 安装完成后,必须进入到扩展程序,找到 vue-devtools 详情信息,把允许访问文件网址打开,然后在你的script中添加下面这段代码

    Vue.config.devtools = true;
    
  7. 然后使用F12来打开开发工具栏,就成功啦

image-20220412191241225 image-20220412191642166 image-20220412191915349 image-20220412191930383

image-20220412193904132

image-20220414101349131

image-20220414101425870

二、第二个小提示的意思是:你正在使用开发者版本的vue,请在生产环境不要使用。

解决办法:把生产提示关掉(具体操作:在body中添加如下代码)

    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue在启动时生成生产提示。
    </script>

三、so怎么验证引入vue成功?

在控制台输入Vue(会自动提示),然后回车,会输出代码。
在这里插入图片描述

  • 6
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值