使用VsCode搭建Vue开发环境

骑猪看日落 2023-09-27 09:42 20阅读 0赞

## 搭建Vue开发环境 ##

有两种安装方式

## 1 使用script标签、 ##

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

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

![在这里插入图片描述][0d13118e2e5543cf9776e7df41e8908a.png]  
点击下载开发版本到本地  
![在这里插入图片描述][7eea5705ddba4b998590ad08508f9d63.png]

把生产版本的也下载下来

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

![在这里插入图片描述][1fb02390d75e4d12bfd180ec0bc15802.png]  
然后本地创建vue工作目录

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

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

![在这里插入图片描述][f417b816ffa64abeadd2de053471d6ca.png]

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

![在这里插入图片描述][f1694158389d4db9a7fdc4782a550489.png]  
页面代码引入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>
        
        <script src="../js/vue.js"></script>
    </head>
    <body>
        
    </body>
    </html>

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

![在这里插入图片描述][a77bea8482694bba92285c6ca08822d7.png]

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

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

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

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

然后解决第二个警告

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

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

![在这里插入图片描述][424d991854f0481f919d5fbe04cd1630.png]  
![在这里插入图片描述][f917b4aa297145268041970d9731282f.png]

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

![在这里插入图片描述][b2b180ad9f974e1a9a25e7d85b05370a.png]  
这时候看官网文档对productionTip的介绍

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

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

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

## 2 使用npm ##

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

[0d13118e2e5543cf9776e7df41e8908a.png]: https://img-blog.csdnimg.cn/0d13118e2e5543cf9776e7df41e8908a.png
[7eea5705ddba4b998590ad08508f9d63.png]: https://img-blog.csdnimg.cn/7eea5705ddba4b998590ad08508f9d63.png
[1fb02390d75e4d12bfd180ec0bc15802.png]: https://img-blog.csdnimg.cn/1fb02390d75e4d12bfd180ec0bc15802.png
[806a457f9b50469ca48f09b6306b8b9e.png]: https://img-blog.csdnimg.cn/806a457f9b50469ca48f09b6306b8b9e.png
[89221d694e114b1d856f6990dda96d32.png]: https://img-blog.csdnimg.cn/89221d694e114b1d856f6990dda96d32.png
[dbc722be51b34178b2ba0852c32e9cfe.png]: https://img-blog.csdnimg.cn/dbc722be51b34178b2ba0852c32e9cfe.png
[f417b816ffa64abeadd2de053471d6ca.png]: https://img-blog.csdnimg.cn/f417b816ffa64abeadd2de053471d6ca.png
[f1694158389d4db9a7fdc4782a550489.png]: https://img-blog.csdnimg.cn/f1694158389d4db9a7fdc4782a550489.png
[a77bea8482694bba92285c6ca08822d7.png]: https://img-blog.csdnimg.cn/a77bea8482694bba92285c6ca08822d7.png
[446919cb8b274e3cb681ec4d2c68b0ba.png]: https://img-blog.csdnimg.cn/446919cb8b274e3cb681ec4d2c68b0ba.png
[f4843486be404c0f8bd0ed5c2b8e6a23.png]: https://img-blog.csdnimg.cn/f4843486be404c0f8bd0ed5c2b8e6a23.png
[vue.js.devtools]: https://editor.csdn.net/md/?articleId=126842962
[5b6ebaa5a5bb4b0fb2817b9c362f7032.png]: https://img-blog.csdnimg.cn/5b6ebaa5a5bb4b0fb2817b9c362f7032.png
[424d991854f0481f919d5fbe04cd1630.png]: https://img-blog.csdnimg.cn/424d991854f0481f919d5fbe04cd1630.png
[f917b4aa297145268041970d9731282f.png]: https://img-blog.csdnimg.cn/f917b4aa297145268041970d9731282f.png
[b2b180ad9f974e1a9a25e7d85b05370a.png]: https://img-blog.csdnimg.cn/b2b180ad9f974e1a9a25e7d85b05370a.png
[db9b8bda0dfe4978b651aafaea59e39b.png]: https://img-blog.csdnimg.cn/db9b8bda0dfe4978b651aafaea59e39b.png