使用VsCode搭建Vue开发环境

搭建Vue开发环境

有两种安装方式

1 使用script标签、

直接下载并用script标签引入，Vue 会被注册为一个全局变量。

这里又分两个版本我们开发就使用开发版本就够了

在这里插入图片描述
点击下载开发版本到本地

把生产版本的也下载下来

可以发现，不仅名称有区别，大小也是有区别的，开发版本比生产版本大

在这里插入图片描述
然后本地创建vue工作目录

在这里插入图片描述
然后使用vscode打开，可以直接把文件夹拖到vscode中

在这里插入图片描述
新建文件夹和文件工作目录叫vue-basic,里面创建一个文件夹叫01-初识vue,然后创建个html文件叫初始vue.html

在这里插入图片描述

然后新建js文件夹,把下载的js放进去方便一会引用

在这里插入图片描述
页面代码引入vue.js

<!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>初始vue</title>
    <!-- 引入vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

但是怎么验证是否成功引入vue了呢？打开浏览器

在这里插入图片描述

F12查看控制台发现多了两个关于vue的提示,就说明引入vue成功了，这两个小提示后面我们会进行关闭，不然开着不舒服
在这里插入图片描述

而且在控制台输入Vue会出现含有Vue的函数
在这里插入图片描述

然后我们把控制台的提示进行清除，首先清除第一个，需要去谷歌应用商城安装vue开发者工具

建议参考我的这篇文章：谷歌浏览器安装vue.js.devtools开发者工具

然后解决第二个警告

想关闭这个警告需要先知道vue.config对象

在这里插入图片描述
我们可以通过浏览器查看vue.config对象是否存在很明显是存在的

在这里插入图片描述

针对这个问题，我们主要关注这个 productionTip( 生产提示) :true

在这里插入图片描述
这时候看官网文档对productionTip的介绍

通过官网介绍我们知道，vue是默认开启生产提示的，我们可以修改这个属性为false，这样就能关闭提示

在这里插入图片描述
我们编写脚本代码测试可以关闭提示，但是并未生效，网上说vue后来移除这个功能了

 // 设置为 false 以阻止 vue 在启动时生成生产提示。
 Vue.config.productionTip= false 
1
2

2 使用npm

但是如果使用npm安装vue，往往需要配合使用cli脚手架一起使用，所以我们首先使用第一种方式

相关阅读:
WZOI-228一个数学问题
Python——比 Seaborn 更好的相关性热力图：Biokit Corrplot
vtk 绘制等高线
【操作系统】维持进程间互斥和同步的工具——PV操作
MATLAB算法实战应用案例精讲-【图像处理】机器视觉（补充篇）
运算方法和运算电路
行人重识别
Spring Security 自定义资源认证规则
系列十三、Redis的哨兵机制
云计算的部署方式(公有云、私有云、混合云、社区云)

原文地址：https://blog.csdn.net/weixin_46713508/article/details/126842962