vue3初识

目录

    • 一、前言
    • 二、主观感受
    • 三、vue3初探

原文以及该系列教程文章后续可点击这里查看:vue初识

一、前言

Vue.js是一款流行的前端框架,最初由尤雨溪(Evan You)于2014年创建,非常的年轻。官网为vue3,

但要注意,vue框架本身是基于前端基础知识之上的,所以学习vue的前提是,你已经理解、并能够熟练的使用htmlcssJavaScript这三大前端基石去开发基本的网页应用了。

如果你对这些还不甚了解,可以阅读本章其它文章快速学习入门:

  • HTML
  • CSS
  • JavaScript

放心,相比于C/C++、python、rust、java之类的语言,这三者是非常简单的,甚至一定程度上来说,除了JavaScript,其它两者都不能算是编程语言。

二、主观感受

我过去主要学习的是C/C++、rust等较偏底层的语言、又或者python等脚本语言,对于前端了解的并不深。

因此我的第一个网站使用的纯html、js、css写的,老实说,写的真的非常难受,而且效率极低,最终的效果也仅仅只是一个静态页面,非常难看,

后来随着了解的深入,我知道了一个叫做JQuery的库,它是一个很优秀的js库,自从用了它之后,我写同一个网页所需要的代码量少了很多,它可以极大的简化js代码。

但直到这时,写网页也仍然是一件非常痛苦的事情,因为虽然JQuery简化了js代码,但css仍旧很麻烦,尤其是当一个网页内标签层次较多时,你想要写一个css样式,就要重复的写一长串的前缀来保证作用的标签正确。

于是后来我了解到了less,通过它,我写css样式也一下子轻松了不少,我可以按我思路准确的写出对应的样式,然后再通过less将其转换为等价的css

自此,前端三大基石html、css、js中的cssjs都有对应的库来简化我网站的开发流程。

原本我以为这已经足够了,因为这真的已经简化了我很多的工作量

如果你真的用纯html、js、css写过一个网页,我想你会明白它的含义。

直到后来,我又遇到了vue,再一次刷新了我对前端的认知。

因为它并不是继续来优化html的书写,而是直接一套框架同时优化htmljscss这三大基石。

具体来说就是,它将一个网页划分为了不同的部分,比如网页的头部、导航栏、页尾等等,甚至更具体的还有一个按钮、一个图片。

vue将这些划分出来的一个个小部分称之为组件,而一个组件同时包含了html、css、js三种代码。

这和其它编程语言中的类的概念类似:将所有相关的属性放在一个对象里面。

vue就是这样,比如你要写一个按钮,那就把按钮的样式、以及按钮相关的处理逻辑代码写进一个组件中。

其他任何地方、甚至可以是不同的项目中,如果想要使用这个封装好的组件,那就直接引入即可。

这非常爽,因为这意味着你可以直接引入别人在网上封装好的组件,比如本网站的前端就有一些组件直接使用到了Element Plus库里面的东西。

如果说以前你复制代码想要使用还需要各种调整,那么一旦你使用了vue,你就真的可以成为一个“CV工程师”。

虽说只是个玩笑,但大多数情况下你确实真的就只是在复制粘贴而已。

然而即使vue在这一点上已经很爽了,但却仍然不是vue的全部,它还有另一个特点“路由”。

这同样也是一个很舒服的东西,因为以前我们如果想要写一个很复杂的网页,正常来说,你必须得不断地在多个html页面中切换,也就是多页面应用。

但到了vue这里就不一样了,因为它从始至终都只有一个html页面、一份css样式文件、一份js代码文件。

它需要对应的工具(称为脚手架)来将vue代码编译为html、css、js,因为只有这样浏览器才能正常识别。

但即使只有一份,你仍然可以实现跳转操作,这就是vue的路由,它可以让你在同一个页面内实现跳转不同的内容,这真的非常棒!

三、vue3初探

学习任何东西,方法都是最重要的,而对于vue来说,其实它的官方教程已经非常详细了,你可以点击这里查阅官方教程。

vue3初识_第1张图片

而进入官方教材的第一步,就是去调整左上方的按钮为组合式

这一步很重要,因为在vue2版本中使用的是选项式编程,而在vue3中,官方推荐使用组合式编程,同时我个人也建议你使用组合式编程。

那什么是选项式,什么是组合式呢?最简单的方法就是举个例子:

比如在vue2中想要创建一个响应式变量需要像下面这样做:

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 2!'
    };
  },
};
script>

看起来是不是觉得很奇怪?反正在我第一次接触vue2的语法时,是真的觉得别扭。

而实现同样功能的vue3代码如下:

<script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue 3!');
script>

现在是不是就觉得直观、精简多了!

注意两者的区别,vue3中,需要在script标签内添加一个叫做setup的属性才能启用这一功能。

上面这就是组合式语法,所谓组合式,通俗的来说就是所有vue3的功能都被封装到了一个个函数中,在你想要使用的时候就直接引入函数即可,也就是所谓的“组合”。

了解了这个,下一步就是理解vue3的工作逻辑。

而理解它工作逻辑最重要的一步就是你要认识到:前端任何代码最终都是交给浏览器运行的,而浏览器只认识html、js、css代码。

而vue框架中的文件都是以**.vue**作为结尾的,一个基本的vue文件结构如下,主要有两个标签:

<template>
template>

<script>
script>

<style>
style>
  • template:这个标签中写我们的html代码
  • script:这个标签中写我们的js代码
  • style:这个标签中写我们的css代码

这时你就可以看到,一个vue文件直接就包含了三种类型的代码,这就是组件的概念。

但这样的代码浏览器肯定是不认识的,所以我们就需要将这种vue代码转换为最终的htmljscss文件,这样浏览器才能认识。

那用什么转换呢?官方将这个工具称之为脚手架,通过脚手架我们就能完成这样的转换。

这类似于C/C++中的编译器,你写的C/C++代码只有经过编译成为可执行文件了电脑才能运行,只不过这里运行的平台换成了浏览器而已。

那怎么下载脚手架呢?那就需要用到这里的node工具了,它只是一个js的运行环境,你暂时可以将其理解为没有窗口的浏览器(但比浏览器要强大的多),可以点击这里前往node官网。

直接下载第一个稳定版,然后安装即可(安装选项可以直接全部默认):

vue3初识_第2张图片

本系列文章均默认你使用的是window系统,因为使用windows系统的人最多,后面的操作仅对windows系统有效,但安装node完成之后的命令,对所有系统都是一样的。

安装完成后,你可以按win+R快捷键,会弹出下面这个编辑框:

vue3初识_第3张图片

输入cmd,点击确认,即可进入黑窗口、终端,或者称其为“控制台”均可:

vue3初识_第4张图片

只要输入node -v命令打印出来了版本号,那就说明你已经安装完成了,如果失败,可能需要重启一下电脑。

自此,我们就完成了node的安装,然后下一步就是安装vue的脚手架了。

这里注意一下两者之间的关系,node只是一个js的运行环境,你可以直接将其理解为没有窗口的浏览器,它可以执行js代码。

而“脚手架”本身是一个可以运行在node之上的程序,它可以将你的vue代码编译成为html、js、css代码。

为你能够安装“脚手架”,我们还需要使用一个叫做npm的工具,它是node的默认包管理器,可以直接使用、用来下载js代码包,同样也就包括了这里的vue的“脚手架”。

回到官网,我们可以看到相应的下载命令:npm init vue@latest

vue3初识_第5张图片

直接复制这条命令到控制台即可:

vue3初识_第6张图片

之后,你就会看到上面这样的创建vue项目的过程,中间会出现很多条例让你选择。

几个重要的点为:

  • 输入项目名:所谓的项目,你可以理解为一个网站的开发所需要的所有代码都在里面,同时也是之后创建的文件夹名称。

  • 使用TypeScript语法:这个看你自己是否熟悉TypeScript了,如果不熟悉,那就默认No即可,没有什么影响。

  • 引入Vue Router:这个就很重要了,因为这就是前面我提到的路由,不过现在我们还处于基础阶段,所以也直接选了No

总的来说就是,除了第一项的项目名你可以自己随便取一个,其它项都直接按Enter键即可,即默认为No,不添加。

最后我用红框框起来的地方就是官方提示我们要执行的命令,你可以直接将其复制下来,挨个执行即可。

vue3初识_第7张图片

  • cd vue-project:进入项目文件夹的意思,你可以看到在运行了这个命令后,其前面的前缀就进入了这个文件夹,这个命令取决于你的项目名字是什么。

  • npm install:这是npm包管理器的安装命令,前面只是在初始化,这里才是安装,至于它安装了什么,你可以到这个项目文件夹中的package.json文件中查看。

  • npm run dev:这是运行脚本的命令,其结果就是,你现在已经启动了一个本地服务器,可以直接通过下图这个链接查看:

vue3初识_第8张图片

在浏览器中打开这个链接,你就能看到下面这样的页面:

vue3初识_第9张图片

这就证明你已经成功安装好了脚手架,这是官方实例的vue文件被编译成为了htmljs以及css,然后被浏览器解析成功了。

此时你可以在控制台按Ctrl+C终止它的运行,然后重新运行命令npm run build:

vue3初识_第10张图片

该命令的作用就是编译,编译完成后,你就能看到最终编译的编译结果放在了dist目录下,正如前面所说,最终编译的结果只有一个htmljscss文件。

当你前端开发完成了之后,便是通过这个命令进行构建,然后将dist目录下的文件放在你的服务器上,可能还需要配置一下服务器的相关设置,然后一个网站就搭建好了!

注意:你直接点击打开它是看不到任何东西的,因为这涉及到浏览器的跨域问题,不允许让你加载js脚本文件,所以你直接点击index.html用浏览器打开,就是一片空白。

最后,为了更加方便的开发Vue代码,我们还需要配置一下开发环境。

本系列所使用的编辑器为vscode,这是目前全网最强大的编辑器,vue官方同样推荐,并且官方还有相关的vue插件,可以让我们的敲代码更加舒服。

其官网可以点击这里跳转,然后下载对应的版本安装即可:

vue3初识_第11张图片

安装完成后,你可以直接在控制台的本项目目录中,输入code .

code是vscode这款软件的命令行命令,而后面的点代表当前目录,意思就是用vscode打开当前目录,不理解的可以参考文章:路径详解。

打开后的首页就是我们的文件夹,里面全是我们这个项目相关的文件:

vue3初识_第12张图片

vscode这款编辑器之所以这么受欢迎,就是因为它强大的插件系统,同样的,我们需要安装vue相关的插件来提升我们的开发效率。

来到插件页面,搜索vue,找到下面两款插件进行安装:

vue3初识_第13张图片

自此,我们所有的准备工作就都完成了,后面便开始真正的vue学习之旅。

原文以及该系列教程文章后续可点击这里查看:vue初识

你可能感兴趣的:(vue,vue3,前端,node,npm)