【零基础入门Vue0005】_搭建Vue开发环境

110 阅读1分钟

一、点击教程,文档目录分析

image.png

二、点击起步

image.png

三、安装vue和开发者工具

image.png

image.png

image.png

Vue提供了两个版本:

开发版本(vue.js):开发的时候使用,如果有些东西写错了,会告诉怎么解决,给自己一些小提示。

生产版本(vue.min.js):Vue项目上线时使用,让Vue体积更小。出现问题都在开发时解决了。

image.png

引入jQuery时,全局多了两个关键字:$jQuery

引入Vue时,全局多了一个内置对象、构造函数:Vue

引入后,控制台会输出如下两个善意的小提示:

image.png

提示1:请下载Vue的开发者工具,达到一个更好的开发体验。也就是说,推荐在Chrome浏览器上安装官方所推出的Vue开发者工具。

提示2:你正在运行一个开发版本的Vue,请你确信你不要生产环境不要这样做。你悠着点,我发现你引入的vue.js,体积有点大看,里面还包含着很多警告,有一些提示的警告都在里面的。还好现在没有上线,上线不要使用vue.js,不太好。

引入vue.js,全局多了Vue构造函数。我们可以在控制台直接输入Vue,就会打印出来下面信息:

image.png

如果不引入vue.jsvue.min.js,控制台肯定是不会有这个提示的,反而会出现如下提示:

image.png

解决这两个提示方法:

第一个解决办法:

方式一:在国外人,可以流畅的访问谷歌应用商店。国内的就访问不了谷歌应用商店了。

image.png

image.png

image.png

方式二:使用Vue.js devtools的安装包

image.png

第二个解决办法:担心生产时,引入vue.js

方式一:打开文档API/全局配置

image.png

<body>
<script>
 Vue.config.productionTip = false;//阻止vue在启动时生成的生产提示
</script>
</body>