【自学vue心得笔记】初识vue以及vue的环境配置

最新推荐文章于 2023-12-27 22:12:54 发布

deidei~~

最新推荐文章于 2023-12-27 22:12:54 发布

阅读量683

点赞数 2

分类专栏： vue学习感悟文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/qq_51843898/article/details/128586444

版权

vue学习感悟专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简介：正好放寒假了嘛～作为一名软件工程大二在读的学生也该学习一些新的知识来扩充自己了，同时也是为新学期做一些准备。本篇文章记录了我在寒假自学前端开发的一些笔记和心得体会，也有一些学习资源的分享，作为我自己一个知识的整理，同时也分享给搜索到这篇文章的UU们❤️接下来会一直学习一直更新～我们互相监督哦！

前言

本篇文章主要介绍了什么是vue，以及在学习vue之前需要搭建的环境，然后用vue写出我们的第一个hello world。

一、vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（来自Vue2.0官网）

二、如何搭建Vue开发环境

工欲善其事，必先利其器。要想学习前端，要想学习vue首先要搭建出能够写代码并且进行开发的环境。既然做的是前端开发，那么我们必然是需要将成果呈现在浏览器上的，所以浏览器是必不可少的。既然做的是开发，所以开发工具也是必不可少的。下面介绍一些常用的浏览器和开发工具。

1.浏览器

1.1Chrome浏览器

如上所示便是chrome浏览器的图标，是我们在前端学习中常用的浏览器。其在使用过程中可以右击页面空白处然后选择“检查”来查看当前页面背后的代码，方便我们参考学习。同时，在浏览我们在本地写的网页项目时，也可以利用“检查”来调试我们所写的代码，非常的方便。
右击检查打开页面的代码
但是，如果我们仅仅就安装了一个chrome浏览器就准备开始学习vue会有些许不便，为了在实际项目中我们可以在使用 Vue 时，在一个更友好的界面中审查和调试 Vue 应用，我们还需要在自己的浏览器上安装一个Vue Devtools(点击即可安装)。

1.2IE浏览器、火狐浏览器、safari

在开发网页的时候有时候在不同的浏览器会出现不兼容的情况，所以我们还需要下载一些常见的浏览器，在测试的时候要保证在各个浏览器中都能使用正常。

2.开发工具

2.1VScode

VScode是一款非常好用的代码编辑器，可以支持C、C++、python、java以及html等多种语言，支持 Windows、Linux 和 macOS 操作系统。内置了对JavaScript，TypeScript和Node.js的支持并且具有丰富的其它语言和扩展的支持，功能超级强大,同时界面显示极度舒适美观。大家可以去VScode官网上下载安装需要的版本。https://code.visualstudio.com/(是完全免费的哦！)
VScode图标

2.2WebStorm

这款软件也是前端开发比较常用的，但是我发现需要付费哈哈哈哈，因为不免费所以没有使用，但是据说功能也非常的强大，被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
WebStorm图标

3.导入vue.js文件顺利使用vue

在安装完了浏览器以及VScode之后（事实上熟悉三件套Html5+CSS3+Javascript的伙伴应该早就已经装好了哈哈哈哈），我们还需要去Vue2.0的官网上下载一下vue.js文件。（可能需要挂vpn）下载vue.js
这边有两个版本，一个是“开发版本”还有一个是“生产版本”。这两个区别是，开发版本中包含了完整的警告和调试模式，可以在我们书写错误的时候给予提醒，而生产版本适用于发布网站的时候用的，两者也有体量上的差距，前者的文件体积更大一些。我们在学习的时候就采用前面那个版本。

下载完成后，我们在VScode中新建三个文件夹：html,js和css，分别用来存放html文件，js文件和css文件。我们将刚刚下载好的vue.js文件放进js文件夹中。将vue.js放进js文件夹中
然后新建一个html文件：初识vue.html。打出html基本代码的框架，然后在<head>标签中插入一行<script>标签来引入vue。

    <head>
        <meta charset="UTF-8" />
        <title>初识vue</title>
        <!-- 引入vue -->
        <script type="text/javascript" src="../js/vue.js"></script><!--插入这一行引入vue.js-->
    </head>

然后接下来就可以快乐的使用vue啦！
在官网上还有其他导入vue的方式，这里就不一一介绍了。

三、写一段Hello World代码

安装完浏览器，VScode，并且学会如何导入vue.js之后我们就搭建好学习vue的环境了，接下来便可以试验一下下面这段代码啦！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初识vue</title>
        <!-- 引入vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>    

    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <h1>Hello,{{name}}</h1>
            <p>我的年龄是{{age}}</p>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false //阻止vue在启动时生成生产提示
            // 创建Vue实例
            new Vue({
                el:'#root',  //el表示元素element,用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
                data:{       //写成一个对象的形式,存储不同的数据，提供给el所指的容器去使用
                    name:'world',
                    age:21
                }
            })
            </script>
    </body>
</html>

总结

完成到这边，就终于迈出学习vue框架的第一步啦！搭建好开发环境之后就该定定心心的充实自己的理论知识以及实战实践了！
下面分享一下目前我找到的一些比较好的学习网站和资源：

学习Vue2.0官网:https://v2.cn.vuejs.org/v2/guide/index.html
提供Vue2.0使用语法的官网文档，以及可以通过官网顶部导航“资源列表”获得很多好用的Vue相关的包。尤其是Awesome Vue，里面也有很多可用的Vue的包，可供下载和使用。

学习Vue3.0官网:https://cn.vuejs.org/
拥有互动教程，可以一边写代码实践一边学习，实践出真知，记忆更深刻。（这个互动教程真的很好玩😍）

MDN Web Docs：https://developer.mozilla.org/zh-CN/
具有html5+CSS3+javascript教程和参考文档。

B站“尚硅谷Vue2.0+Vue3.0全套教程”：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1&vd_source=1fc5b788599bbba1e600bd24a4a1511c
讲的很详细，这几天一直都在看！老师很风趣幽默，总之质量很高的一套课程，不会让人打瞌睡！

希望接下来的寒假可以学习更多的前端知识，早日写出自己的网站！要继续加油啊。