学习Vue前所一定要知道的事？怎么学？推荐教程？_学习vue之前要学习什么

作者：AllinToyou | 2024-03-20 00:13:52

踩

学习vue之前要学习什么

一. Vue简介

简单来说，Vue就是一套用于构建用户界面的渐进式JavaScript框架，现在最主流的前端框架之一。

二. 版本

当前，vue共有3个版本，其中：
①2.x版本的vue是目前企业级项目开发中的主流版本（基础）
②3.x版本的vue于2020-09-19发布，生态还不完善，尚未在企业及项目开发中普及和推广（升级）
~~③1.x版本的vue几乎被淘汰，不再建议学习与使用~~

三. 编程环境

建议使用Visual Studio Code开发环境，不会的同学在csdn上随便找一篇下载安装全教程，非常多，懒得找的这里推荐一篇 vscode配置html_vscode安装方法及常用插件

四. 怎么学？

1.建议在学习Vue之前至少要有一点HTML5和JavaScript基础。

2.看视频教程，推荐b站的黑马程序员、尚硅谷等vue2+vue3全套视频教程，直接搜“vue”最热的那几个中就能找到，都有理论和实战的结合，学计算机专业必不可少！
直接放链接：
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
 黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖

3.一定要动手敲代码！不要复制粘贴！一定要多练、多练！!

五. 开始学习之路的第一关：Hello Vue！

环境搭建好之后，创建一个.html文件，编写如下代码：

<!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>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello Vue!"
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

学习vue的第一个程序就写好啦！

附：

HTML小妙招

如果你是有基础的同学，就可以忽略我记录的一些编写html的小妙招

小妙招1：新建好html文件后，在第一行输入英文状态下感叹号 ! +tab键或者 ! +Enter回车键，可以快速的搭建html框架。

小妙招2：利用超高速前端开发工具Emmet快速编写html，推荐一篇快速入门 emmet 语法

如何实现vs code编写代码在浏览器自动刷新显示

1.首先在vs code里安装“live Server”的插件

在这里插入图片描述

2.编写好代码点击右键，选择“open with Live Server”运行

在这里插入图片描述

3.保存方式可以用手动Ctrl+S 或者自动保存：点击左上角“文件”->选择“自动保存”即可

结束！
小白写一篇博客太难了呜呜呜，好了，开始沉浸式学vue，后续再记录一些笔记吧。
加油，坚持就是胜利！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/269261